SOFIE-40 | add a 'save' button in peripheral device settings, instead of autosave

Author: anteeek

packages/webui/src/client/ui/Settings/Studio/Devices/GenericSubDevices.tsx

@@ -7,7 +7,7 @@ import {
 	WrappedOverridableItemDeleted,
 	WrappedOverridableItemNormal,
 } from '../../util/OverrideOpHelper.js'
-import { faCheck, faPencilAlt, faSync, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faCheck, faPencilAlt, faSync, faTrash, faSave, faBan } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { JSONBlob, JSONBlobParse, JSONSchema } from '@sofie-automation/blueprints-integration'
 import { DropdownInputControl, DropdownInputOption } from '../../../../lib/Components/DropdownInput.js'
@@ -32,12 +32,24 @@ interface PeripheralDeviceTranslated {
 export interface SubDevicesTableProps {
 	subDevices: WrappedOverridableItem<any>[]
 	overrideHelper: OverrideOpHelper
+	instantSaveOverrideHelper: OverrideOpHelper
 	peripheralDevices: PeripheralDevice[]
+	hasUnsavedChanges: boolean
+	saveChanges: () => void
+	discardChanges: () => void
+	updateObjectId: (oldId: string, newId: string) => void
+	updatedIds: Map<string, string>
 }
 export function GenericSubDevicesTable({
 	subDevices,
 	overrideHelper,
 	peripheralDevices,
+	hasUnsavedChanges,
+	instantSaveOverrideHelper,
+	saveChanges,
+	discardChanges,
+	updateObjectId,
+	updatedIds,
 }: Readonly<SubDevicesTableProps>): JSX.Element {
 	const { t } = useTranslation()
 	const { toggleExpanded, isExpanded } = useToggleExpandHelper()
@@ -59,15 +71,14 @@ export function GenericSubDevicesTable({
 
 		return devicesMap
 	}, [peripheralDevices])
-
 	const confirmRemove = useCallback(
 		(subdeviceId: string) => {
 			doModalDialog({
 				title: t('Remove this device?'),
 				no: t('Cancel'),
 				yes: t('Remove'),
 				onAccept: () => {
-					overrideHelper().deleteItem(subdeviceId).commit()
+					instantSaveOverrideHelper().deleteItem(subdeviceId).commit()
 				},
 				message: (
 					<React.Fragment>
@@ -82,7 +93,7 @@ export function GenericSubDevicesTable({
 				),
 			})
 		},
-		[t, overrideHelper]
+		[t, instantSaveOverrideHelper]
 	)
 
 	const peripheralDeviceOptions = useMemo(() => {
@@ -145,6 +156,7 @@ export function GenericSubDevicesTable({
 									isEdited={isExpanded(item.id)}
 									editItemWithId={toggleExpanded}
 									removeItemWithId={confirmRemove}
+									updatedIds={updatedIds}
 								/>
 								{isExpanded(item.id) && (
 									<SubDeviceEditRow
@@ -153,6 +165,11 @@ export function GenericSubDevicesTable({
 										editItemWithId={toggleExpanded}
 										item={item}
 										overrideHelper={overrideHelper}
+										hasUnsavedChanges={hasUnsavedChanges}
+										saveChanges={saveChanges}
+										discardChanges={discardChanges}
+										updateObjectId={updateObjectId}
+										updatedIds={updatedIds}
 									/>
 								)}
 							</React.Fragment>
@@ -170,13 +187,15 @@ interface SummaryRowProps {
 	isEdited: boolean
 	editItemWithId: (itemId: string) => void
 	removeItemWithId: (itemId: string) => void
+	updatedIds: Map<string, string>
 }
 function SummaryRow({
 	item,
 	peripheralDevice,
 	isEdited,
 	editItemWithId,
 	removeItemWithId,
+	updatedIds,
 }: Readonly<SummaryRowProps>): JSX.Element {
 	const editItem = useCallback(() => editItemWithId(item.id), [editItemWithId, item.id])
 	const removeItem = useCallback(() => removeItemWithId(item.id), [removeItemWithId, item.id])
@@ -185,13 +204,17 @@ function SummaryRow({
 		? (peripheralDevice.subdeviceManifest?.[item.computed.options.type]?.displayName ?? '-')
 		: '-'
 
+	const idChanged = Array.from(updatedIds?.entries() || []).some(([key, value]) => value === item.id || key === item.id)
+
 	return (
 		<tr
 			className={classNames({
 				hl: isEdited,
 			})}
 		>
-			<th className="settings-studio-device__name c2">{item.id}</th>
+			<th className="settings-studio-device__name c2">
+				{item.id} {idChanged && '(pending save)'}
+			</th>
 
 			<th className="settings-studio-device__parent c2">
 				{peripheralDevice?.name || item.computed.peripheralDeviceId || '-'}
@@ -252,31 +275,41 @@ interface SubDeviceEditRowProps {
 	editItemWithId: (subdeviceId: string, forceState?: boolean) => void
 	item: WrappedOverridableItemNormal<any>
 	overrideHelper: OverrideOpHelper
+	hasUnsavedChanges: boolean
+	saveChanges: () => void
+	discardChanges: () => void
+	updateObjectId: (oldId: string, newId: string) => void
+	updatedIds: Map<string, string>
 }
 function SubDeviceEditRow({
 	peripheralDevice,
 	peripheralDeviceOptions,
 	editItemWithId,
 	item,
 	overrideHelper,
+	hasUnsavedChanges,
+	saveChanges,
+	discardChanges,
+	updateObjectId,
+	updatedIds,
 }: Readonly<SubDeviceEditRowProps>) {
 	const { t } = useTranslation()
 
 	const finishEditItem = useCallback(() => editItemWithId(item.id, false), [editItemWithId, item.id])
 
-	const updateObjectId = useCallback(
+	const handleUpdateId = useCallback(
 		(newId: string) => {
-			if (item.id === newId) return
-
-			overrideHelper().changeItemId(item.id, newId).commit()
+			updateObjectId(item.id, newId)
 
 			// toggle ui visibility
 			editItemWithId(item.id, false)
 			editItemWithId(newId, true)
 		},
-		[item.id, overrideHelper, editItemWithId]
+		[item.id, updateObjectId]
 	)
 
+	const idToShowInInput = updatedIds?.get(item.id) || item.id
+
 	return (
 		<tr className="expando-details hl" key={item.id + '-details'}>
 			<td colSpan={99}>
@@ -294,7 +327,7 @@ function SubDeviceEditRow({
 					</LabelAndOverridesForDropdown>
 					<label className="field">
 						<LabelActual label={t('Device ID')} />
-						<TextInputControl value={item.id} handleUpdate={updateObjectId} disabled={!!item.defaults} />
+						<TextInputControl value={idToShowInInput} handleUpdate={handleUpdateId} disabled={!!item.defaults} />
 					</label>
 
 					{!item.computed.peripheralDeviceId && (
@@ -308,9 +341,23 @@ function SubDeviceEditRow({
 					)}
 				</div>
 				<div className="m-1 me-2 text-end">
-					<button className={classNames('btn btn-primary')} onClick={finishEditItem}>
-						<FontAwesomeIcon icon={faCheck} />
-					</button>
+					{hasUnsavedChanges ? (
+						<>
+							<button className="btn btn-warning ms-2" onClick={discardChanges}>
+								<FontAwesomeIcon icon={faBan} />
+								&nbsp;{t('Discard')}
+							</button>
+
+							<button className="btn btn-primary ms-2" onClick={saveChanges}>
+								<FontAwesomeIcon icon={faSave} />
+								&nbsp;{t('Save')}
+							</button>
+						</>
+					) : (
+						<button className={classNames('btn btn-primary')} onClick={finishEditItem}>
+							<FontAwesomeIcon icon={faCheck} />
+						</button>
+					)}
 				</div>
 			</td>
 		</tr>

packages/webui/src/client/ui/Settings/Studio/Devices/IngestSubDevices.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { Studios } from '../../../../collections/index.js'
 import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { useTracker } from '../../../../lib/ReactMeteorData/ReactMeteorData.js'
@@ -30,6 +30,13 @@ export function StudioIngestSubDevices({
 
 	const studio = useTracker(() => Studios.findOne(studioId), [studioId])
 
+	const [unsavedOverrides, setUnsavedOverrides] = useState<SomeObjectOverrideOp[] | undefined>(undefined)
+
+	const baseSettings = useMemo(
+		() => studio?.peripheralDeviceSettings?.ingestDevices ?? wrapDefaultObject({}),
+		[studio?.peripheralDeviceSettings?.ingestDevices]
+	)
+
 	const saveOverrides = useCallback(
 		(newOps: SomeObjectOverrideOp[]) => {
 			if (studio?._id) {
@@ -43,17 +50,25 @@ export function StudioIngestSubDevices({
 		[studio?._id]
 	)
 
-	const baseSettings = useMemo(
-		() => studio?.peripheralDeviceSettings?.ingestDevices ?? wrapDefaultObject({}),
-		[studio?.peripheralDeviceSettings?.ingestDevices]
-	)
+	const settingsWithOverrides = useMemo(() => {
+		if (unsavedOverrides) {
+			return {
+				...baseSettings,
+				overrides: unsavedOverrides,
+			}
+		}
+		return baseSettings
+	}, [baseSettings, unsavedOverrides])
 
-	const overrideHelper = useOverrideOpHelper(saveOverrides, baseSettings)
+	const batchedOverrideHelper = useOverrideOpHelper(setUnsavedOverrides, settingsWithOverrides)
+	const instantSaveOverrideHelper = useOverrideOpHelper(saveOverrides, settingsWithOverrides)
 
 	const wrappedSubDevices = useMemo(
 		() =>
-			getAllCurrentAndDeletedItemsFromOverrides<StudioIngestDevice>(baseSettings, (a, b) => a[0].localeCompare(b[0])),
-		[baseSettings]
+			getAllCurrentAndDeletedItemsFromOverrides<StudioIngestDevice>(settingsWithOverrides, (a, b) =>
+				a[0].localeCompare(b[0])
+			),
+		[settingsWithOverrides]
 	)
 
 	const filteredPeripheralDevices = useMemo(
@@ -85,7 +100,39 @@ export function StudioIngestSubDevices({
 				'peripheralDeviceSettings.ingestDevices.overrides': addOp,
 			},
 		})
-	}, [studioId, wrappedSubDevices])
+	}, [wrappedSubDevices, settingsWithOverrides.overrides])
+
+	const [updatedIds, setUpdatedIds] = useState(new Map<string, string>())
+
+	const updateObjectId = useCallback(
+		(oldId: string, newId: string) => {
+			if (oldId === newId) return
+
+			batchedOverrideHelper().changeItemId(oldId, newId).commit()
+			setUpdatedIds((prev) => new Map(prev).set(oldId, newId))
+		},
+		[batchedOverrideHelper, setUpdatedIds]
+	)
+
+	const discardChanges = useCallback(() => {
+		setUnsavedOverrides(undefined)
+		setUpdatedIds(new Map<string, string>())
+	}, [])
+
+	const saveChanges = useCallback(() => {
+		if (studio?._id && unsavedOverrides) {
+			Studios.update(studio._id, {
+				$set: {
+					'peripheralDeviceSettings.ingestDevices.overrides': unsavedOverrides,
+				},
+			})
+			setUnsavedOverrides(undefined)
+		}
+
+		if (updatedIds.size > 0) {
+			setUpdatedIds(new Map<string, string>())
+		}
+	}, [studio?._id, unsavedOverrides])
 
 	return (
 		<div className="mb-4">
@@ -101,8 +148,14 @@ export function StudioIngestSubDevices({
 
 			<GenericSubDevicesTable
 				subDevices={wrappedSubDevices}
-				overrideHelper={overrideHelper}
+				overrideHelper={batchedOverrideHelper}
 				peripheralDevices={filteredPeripheralDevices}
+				hasUnsavedChanges={!!unsavedOverrides}
+				instantSaveOverrideHelper={instantSaveOverrideHelper}
+				saveChanges={saveChanges}
+				discardChanges={discardChanges}
+				updateObjectId={updateObjectId}
+				updatedIds={updatedIds}
 			/>
 
 			<div className="my-1 mx-2">