wip: ux

Author: Julusian

packages/corelib/src/overrideOpHelper.ts

@@ -44,13 +44,25 @@ export function getAllCurrentAndDeletedItemsFromOverrides<T extends object>(
 	// Sort and wrap in the return type
 	const sortedItems = getAllCurrentItemsFromOverrides(rawObject, comparitor)
 
-	const removedOutputLayers: WrappedOverridableItemDeleted<T>[] = []
+	const computedItemIds = new Set(sortedItems.map((l) => l.id))
+	const removedItems = getAllRemovedItemsFromOverrides(rawObject, comparitor, computedItemIds)
+
+	return [...sortedItems, ...removedItems]
+}
+
+export function getAllRemovedItemsFromOverrides<T extends object>(
+	rawObject: ReadonlyDeep<ObjectWithOverrides<Record<string, T | undefined>>>,
+	comparitor:
+		| ((a: [id: string, obj: T | ReadonlyDeep<T>], b: [id: string, obj: T | ReadonlyDeep<T>]) => number)
+		| null,
+	validItemIds: Set<string> // TODO - should this be optional?
+): WrappedOverridableItemDeleted<T>[] {
+	const removedItems: WrappedOverridableItemDeleted<T>[] = []
 
 	// Find the items which have been deleted with an override
-	const computedOutputLayerIds = new Set(sortedItems.map((l) => l.id))
 	for (const [id, output] of Object.entries<ReadonlyDeep<T | undefined>>(rawObject.defaults)) {
-		if (!computedOutputLayerIds.has(id) && output) {
-			removedOutputLayers.push(
+		if (!validItemIds.has(id) && output) {
+			removedItems.push(
 				literal<WrappedOverridableItemDeleted<T>>({
 					type: 'deleted',
 					id: id,
@@ -62,9 +74,9 @@ export function getAllCurrentAndDeletedItemsFromOverrides<T extends object>(
 		}
 	}
 
-	if (comparitor) removedOutputLayers.sort((a, b) => comparitor([a.id, a.defaults], [b.id, b.defaults]))
+	if (comparitor) removedItems.sort((a, b) => comparitor([a.id, a.defaults], [b.id, b.defaults]))
 
-	return [...sortedItems, ...removedOutputLayers]
+	return removedItems
 }
 
 /**

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

@@ -33,6 +33,8 @@ import { useTracker } from '../../../../lib/ReactMeteorData/ReactMeteorData'
 import { TextInputControl } from '../../../../lib/Components/TextInput'
 import { MomentFromNow } from '../../../../lib/Moment'
 import { MeteorCall } from '../../../../lib/meteorApi'
+import { ReadonlyDeep } from 'type-fest'
+import { PeripheralDevice } from '@sofie-automation/corelib/dist/dataModel/PeripheralDevice'
 
 interface StudioParentDevicesProps {
 	studioId: StudioId
@@ -63,8 +65,6 @@ export function StudioParentDevices({ studioId }: Readonly<StudioParentDevicesPr
 
 	const overrideHelper = useOverrideOpHelper(saveOverrides, deviceSettings)
 
-	console.log('deviceSettings', deviceSettings)
-
 	const wrappedDeviceSettings = useMemo(
 		() =>
 			getAllCurrentAndDeletedItemsFromOverrides<StudioDeviceSettings>(deviceSettings, (a, b) =>
@@ -73,43 +73,50 @@ export function StudioParentDevices({ studioId }: Readonly<StudioParentDevicesPr
 		[deviceSettings]
 	)
 
-	const addNewItem = useCallback(() => {
-		const newId = getRandomString()
-		const newDevice = literal<StudioDeviceSettings>({
-			// peripheralDeviceId: undefined,
-			name: 'New Device',
-			options: {},
-		})
-
-		const addOp = literal<ObjectOverrideSetOp>({
-			op: 'set',
-			path: newId,
-			value: newDevice,
-		})
-
-		Studios.update(studioId, {
-			$push: {
-				'peripheralDeviceSettings.deviceSettings.overrides': addOp,
-			},
-		})
-	}, [studioId])
+	const addNewItem = useCallback(
+		(id?: string) => {
+			const newId = id ?? getRandomString()
+			const newDevice = literal<StudioDeviceSettings>({
+				// peripheralDeviceId: undefined,
+				name: 'New Device',
+				options: {},
+			})
+
+			const addOp = literal<ObjectOverrideSetOp>({
+				op: 'set',
+				path: newId,
+				value: newDevice,
+			})
+
+			Studios.update(studioId, {
+				$push: {
+					'peripheralDeviceSettings.deviceSettings.overrides': addOp,
+				},
+			})
+		},
+		[studioId]
+	)
+	const addNewItemClick = useCallback(() => addNewItem(), [studioId])
+
+	const hasCurrentDevice = wrappedDeviceSettings.find((d) => d.type === 'normal')
 
 	return (
 		<div>
 			<h2 className="mhn">
-				<Tooltip
-					overlay={t('Parent devices are ????')}
-					visible={getHelpMode() && !wrappedDeviceSettings.length}
-					placement="right"
-				>
+				<Tooltip overlay={t('Parent devices are ????')} visible={getHelpMode() && !hasCurrentDevice} placement="right">
 					<span>{t('Parent Devices')}</span>
 				</Tooltip>
 			</h2>
 
-			<GenericParentDevicesTable studioId={studioId} devices={wrappedDeviceSettings} overrideHelper={overrideHelper} />
+			<GenericParentDevicesTable
+				studioId={studioId}
+				devices={wrappedDeviceSettings}
+				overrideHelper={overrideHelper}
+				createItemWithId={addNewItem}
+			/>
 
 			<div className="mod mhs">
-				<button className="btn btn-primary" onClick={addNewItem}>
+				<button className="btn btn-primary" onClick={addNewItemClick}>
 					<FontAwesomeIcon icon={faPlus} />
 				</button>
 			</div>
@@ -128,17 +135,26 @@ interface ParentDevicesTableProps {
 	studioId: StudioId
 	devices: WrappedOverridableItem<StudioDeviceSettings>[]
 	overrideHelper: OverrideOpHelper
+	createItemWithId: (id: string) => void
 }
 function GenericParentDevicesTable({
 	studioId,
 	devices,
 	overrideHelper,
+	createItemWithId,
 }: Readonly<ParentDevicesTableProps>): JSX.Element {
 	const { t } = useTranslation()
 	const { toggleExpanded, isExpanded } = useToggleExpandHelper()
 
 	const allParentDevices = useTracker(() => PeripheralDevices.find({ parentDeviceId: undefined }).fetch(), [], [])
 
+	const studioParentDevices = useTracker(
+		() => PeripheralDevices.find({ parentDeviceId: undefined, 'studioAndConfigId.studioId': studioId }).fetch(),
+		[studioId],
+		[]
+	)
+	const allKnownConfigIds = new Set(devices.map((d) => d.id))
+
 	const peripheralDevicesByConfigIdMap = useMemo(() => {
 		const devicesMap = new Map<string, PeripheralDeviceTranslated>()
 
@@ -250,6 +266,19 @@ function GenericParentDevicesTable({
 						)
 					}
 				})}
+				{studioParentDevices.map((device) => {
+					if (!device.studioAndConfigId) return null
+					if (allKnownConfigIds.has(device.studioAndConfigId.configId)) return null
+
+					return (
+						<OrphanedSummaryRow
+							key={`device_${device._id}`}
+							configId={device.studioAndConfigId.configId}
+							device={device}
+							createItemWithId={createItemWithId}
+						/>
+					)
+				})}
 			</tbody>
 		</table>
 	)
@@ -322,6 +351,31 @@ function DeletedSummaryRow({ item, undeleteItemWithId }: Readonly<DeletedSummary
 	)
 }
 
+interface OrphanedSummaryRowProps {
+	configId: string
+	device: ReadonlyDeep<PeripheralDevice>
+	createItemWithId: (itemId: string) => void
+}
+function OrphanedSummaryRow({ configId, device, createItemWithId }: Readonly<OrphanedSummaryRowProps>): JSX.Element {
+	const createItem = useCallback(() => createItemWithId(configId), [createItemWithId, configId])
+
+	return (
+		<tr>
+			<th className="settings-studio-device__name c2 deleted">-</th>
+
+			<th className="settings-studio-device__gateway c2 deleted">{device.name || unprotectString(device._id)}</th>
+
+			<th className="settings-studio-device__last_seen c2 deleted">{<MomentFromNow date={device.lastSeen} />}</th>
+
+			<td className="settings-studio-device__actions table-item-actions c1" key="action">
+				<button className="action-btn" onClick={createItem} title="Setup device">
+					<FontAwesomeIcon icon={faPlus} />
+				</button>
+			</td>
+		</tr>
+	)
+}
+
 interface ParentDeviceEditRowProps {
 	studioId: StudioId
 	peripheralDevice: PeripheralDeviceTranslated | undefined