fix: reduce duplication when using useOverrideOpHelper for simple objects (Sofie-Automation#1619)

Author: Julusian

packages/webui/src/client/ui/Settings/BlueprintConfigSchema/index.tsx

@@ -3,12 +3,8 @@ import { MappingExt, MappingsExt } from '@sofie-automation/corelib/dist/dataMode
 import { IBlueprintConfig, ISourceLayer, SchemaFormUIField } from '@sofie-automation/blueprints-integration'
 import { groupByToMapFunc, literal } from '@sofie-automation/corelib/dist/lib'
 import { useTranslation } from 'react-i18next'
-import {
-	applyAndValidateOverrides,
-	ObjectWithOverrides,
-	SomeObjectOverrideOp,
-} from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
-import { useOverrideOpHelper, WrappedOverridableItemNormal } from '../util/OverrideOpHelper.js'
+import { ObjectWithOverrides, SomeObjectOverrideOp } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
+import { useOverrideOpHelperForSimpleObject } from '../util/OverrideOpHelper.js'
 import { JSONSchema } from '@sofie-automation/shared-lib/dist/lib/JSONSchemaTypes'
 import deepmerge from 'deepmerge'
 import { SchemaFormSofieEnumDefinition, translateStringIfHasNamespaces } from '../../../lib/forms/schemaFormUtil.js'
@@ -87,41 +83,25 @@ export function BlueprintConfigSchemaSettings({
 		}
 	}, [layerMappings, sourceLayers])
 
-	const [wrappedItem, wrappedConfigObject] = useMemo(() => {
+	const combinedObject = useMemo<ObjectWithOverrides<IBlueprintConfig>>(() => {
+		// TODO - replace based around a custom implementation of OverrideOpHelperForItemContents?
+
 		const combinedDefaults: IBlueprintConfig = alternateConfig
 			? deepmerge<IBlueprintConfig>(alternateConfig, rawConfigObject.defaults, {
 					arrayMerge: (_destinationArray, sourceArray, _options) => sourceArray,
 				})
 			: rawConfigObject.defaults
 
-		const prefixedOps = rawConfigObject.overrides.map((op) => ({
-			...op,
-			// TODO: can we avoid doing this hack?
-			path: `0.${op.path}`,
-		}))
-
-		const computedValue = applyAndValidateOverrides({
+		return {
 			defaults: combinedDefaults,
 			overrides: rawConfigObject.overrides,
-		}).obj
-
-		const wrappedItem = literal<WrappedOverridableItemNormal<IBlueprintConfig>>({
-			type: 'normal',
-			id: '0',
-			computed: computedValue,
-			defaults: combinedDefaults,
-			overrideOps: prefixedOps,
-		})
-
-		const wrappedConfigObject: ObjectWithOverrides<IBlueprintConfig> = {
-			defaults: combinedDefaults,
-			overrides: prefixedOps,
 		}
+	}, [alternateConfig, rawConfigObject])
 
-		return [wrappedItem, wrappedConfigObject]
-	}, [rawConfigObject])
-
-	const overrideHelper = useOverrideOpHelper(saveOverridesStrippingPrefix, wrappedConfigObject) // TODO - replace based around a custom implementation of OverrideOpHelperForItemContents?
+	const { overrideHelper, wrappedItem } = useOverrideOpHelperForSimpleObject(
+		saveOverridesStrippingPrefix,
+		combinedObject
+	)
 
 	const groupedSchema = useMemo(() => {
 		if (schema?.type === 'object' && schema.properties) {

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

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { getAllCurrentAndDeletedItemsFromOverrides, useOverrideOpHelper } from '../../util/OverrideOpHelper.js'
 import {
 	ObjectOverrideSetOp,
+	ObjectWithOverrides,
 	SomeObjectOverrideOp,
 	wrapDefaultObject,
 } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
@@ -43,7 +44,7 @@ export function StudioIngestSubDevices({
 		[studio?._id]
 	)
 
-	const baseSettings = useMemo(
+	const baseSettings = useMemo<ObjectWithOverrides<Record<string, StudioIngestDevice>>>(
 		() => studio?.peripheralDeviceSettings?.ingestDevices ?? wrapDefaultObject({}),
 		[studio?.peripheralDeviceSettings?.ingestDevices]
 	)

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

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { getAllCurrentAndDeletedItemsFromOverrides, useOverrideOpHelper } from '../../util/OverrideOpHelper.js'
 import {
 	ObjectOverrideSetOp,
+	ObjectWithOverrides,
 	SomeObjectOverrideOp,
 	wrapDefaultObject,
 } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
@@ -40,7 +41,7 @@ export function StudioInputSubDevices({ studioId, studioDevices }: Readonly<Stud
 		[studio?._id]
 	)
 
-	const baseSettings = useMemo(
+	const baseSettings = useMemo<ObjectWithOverrides<Record<string, StudioInputDevice>>>(
 		() => studio?.peripheralDeviceSettings?.inputDevices ?? wrapDefaultObject({}),
 		[studio?.peripheralDeviceSettings?.inputDevices]
 	)

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

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { getAllCurrentAndDeletedItemsFromOverrides, useOverrideOpHelper } from '../../util/OverrideOpHelper.js'
 import {
 	ObjectOverrideSetOp,
+	ObjectWithOverrides,
 	SomeObjectOverrideOp,
 	wrapDefaultObject,
 } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
@@ -44,7 +45,7 @@ export function StudioPlayoutSubDevices({
 		[studio?._id]
 	)
 
-	const baseSettings = useMemo(
+	const baseSettings = useMemo<ObjectWithOverrides<Record<string, StudioPlayoutDevice>>>(
 		() => studio?.peripheralDeviceSettings?.playoutDevices ?? wrapDefaultObject({}),
 		[studio?.peripheralDeviceSettings?.playoutDevices]
 	)

packages/webui/src/client/ui/Settings/Studio/Generic.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { DBStudio, IStudioSettings } from '@sofie-automation/corelib/dist/dataModel/Studio'
+import { DBStudio } from '@sofie-automation/corelib/dist/dataModel/Studio'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
 import { useTranslation } from 'react-i18next'
@@ -18,14 +18,9 @@ import {
 } from '../../../lib/Components/LabelAndOverrides.js'
 import { catchError } from '../../../lib/lib.js'
 import { ForceQuickLoopAutoNext } from '@sofie-automation/shared-lib/dist/core/model/StudioSettings'
-import {
-	applyAndValidateOverrides,
-	ObjectWithOverrides,
-	SomeObjectOverrideOp,
-} from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
-import { useOverrideOpHelper, WrappedOverridableItemNormal } from '../util/OverrideOpHelper.js'
+import { SomeObjectOverrideOp } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
+import { useOverrideOpHelperForSimpleObject } from '../util/OverrideOpHelper.js'
 import { IntInputControl } from '../../../lib/Components/IntInput.js'
-import { literal } from '@sofie-automation/corelib/dist/lib'
 import { useMemo } from 'react'
 import { CheckboxControl } from '../../../lib/Components/Checkbox.js'
 import { TextInputControl } from '../../../lib/Components/TextInput.js'
@@ -161,32 +156,10 @@ function StudioSettings({ studio }: { studio: DBStudio }): JSX.Element {
 		[studio._id]
 	)
 
-	const [wrappedItem, wrappedConfigObject] = useMemo(() => {
-		const prefixedOps = studio.settingsWithOverrides.overrides.map((op) => ({
-			...op,
-			// TODO: can we avoid doing this hack?
-			path: `0.${op.path}`,
-		}))
-
-		const computedValue = applyAndValidateOverrides(studio.settingsWithOverrides).obj
-
-		const wrappedItem = literal<WrappedOverridableItemNormal<IStudioSettings>>({
-			type: 'normal',
-			id: '0',
-			computed: computedValue,
-			defaults: studio.settingsWithOverrides.defaults,
-			overrideOps: prefixedOps,
-		})
-
-		const wrappedConfigObject: ObjectWithOverrides<IStudioSettings> = {
-			defaults: studio.settingsWithOverrides.defaults,
-			overrides: prefixedOps,
-		}
-
-		return [wrappedItem, wrappedConfigObject]
-	}, [studio.settingsWithOverrides])
-
-	const overrideHelper = useOverrideOpHelper(saveOverrides, wrappedConfigObject)
+	const { overrideHelper, wrappedItem } = useOverrideOpHelperForSimpleObject(
+		saveOverrides,
+		studio.settingsWithOverrides
+	)
 
 	const autoNextOptions: DropdownInputOption<ForceQuickLoopAutoNext>[] = useMemo(
 		() => [

packages/webui/src/client/ui/Settings/SystemManagement.tsx

@@ -9,7 +9,6 @@ import { languageAnd } from '../../lib/language.js'
 import { TriggeredActionsEditor } from './components/triggeredActions/TriggeredActionsEditor.js'
 import { TFunction, useTranslation } from 'react-i18next'
 import { Meteor } from 'meteor/meteor'
-import { literal } from '@sofie-automation/corelib/dist/lib'
 import { LogLevel } from '@sofie-automation/meteor-lib/dist/lib'
 import { CoreSystem } from '../../collections/index.js'
 import { CollectionCleanupResult } from '@sofie-automation/meteor-lib/dist/api/system'
@@ -21,13 +20,8 @@ import {
 } from '../../lib/Components/LabelAndOverrides.js'
 import { catchError } from '../../lib/lib.js'
 import { SystemManagementBlueprint } from './SystemManagement/Blueprint.js'
-import {
-	applyAndValidateOverrides,
-	ObjectWithOverrides,
-	SomeObjectOverrideOp,
-} from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
-import { ICoreSystemSettings } from '@sofie-automation/blueprints-integration'
-import { WrappedOverridableItemNormal, useOverrideOpHelper } from './util/OverrideOpHelper.js'
+import { SomeObjectOverrideOp } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
+import { useOverrideOpHelperForSimpleObject } from './util/OverrideOpHelper.js'
 import { CheckboxControl } from '../../lib/Components/Checkbox.js'
 import {
 	CombinedMultiLineTextInputControl,
@@ -531,35 +525,5 @@ function useCoreSystemSettingsWithOverrides(coreSystem: ICoreSystem) {
 		[coreSystem._id]
 	)
 
-	const [wrappedItem, wrappedConfigObject] = useMemo(() => {
-		const prefixedOps = coreSystem.settingsWithOverrides.overrides.map((op) => ({
-			...op,
-			// TODO: can we avoid doing this hack?
-			path: `0.${op.path}`,
-		}))
-
-		const computedValue = applyAndValidateOverrides(coreSystem.settingsWithOverrides).obj
-
-		const wrappedItem = literal<WrappedOverridableItemNormal<ICoreSystemSettings>>({
-			type: 'normal',
-			id: '0',
-			computed: computedValue,
-			defaults: coreSystem.settingsWithOverrides.defaults,
-			overrideOps: prefixedOps,
-		})
-
-		const wrappedConfigObject: ObjectWithOverrides<ICoreSystemSettings> = {
-			defaults: coreSystem.settingsWithOverrides.defaults,
-			overrides: prefixedOps,
-		}
-
-		return [wrappedItem, wrappedConfigObject]
-	}, [coreSystem.settingsWithOverrides])
-
-	const overrideHelper = useOverrideOpHelper(saveOverrides, wrappedConfigObject)
-
-	return {
-		wrappedItem,
-		overrideHelper,
-	}
+	return useOverrideOpHelperForSimpleObject(saveOverrides, coreSystem.settingsWithOverrides)
 }

packages/webui/src/client/ui/Settings/util/OverrideOpHelper.tsx

@@ -1,6 +1,16 @@
-import { SomeObjectOverrideOp, ObjectWithOverrides } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
-import { useRef, useEffect, useCallback } from 'react'
-import { OverrideOpHelper, OverrideOpHelperImpl } from '@sofie-automation/corelib/dist/overrideOpHelper'
+import {
+	SomeObjectOverrideOp,
+	ObjectWithOverrides,
+	applyAndValidateOverrides,
+} from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
+import { useRef, useEffect, useCallback, useMemo } from 'react'
+import {
+	OverrideOpHelper,
+	OverrideOpHelperImpl,
+	WrappedOverridableItemNormal,
+} from '@sofie-automation/corelib/dist/overrideOpHelper'
+import { ReadonlyDeep } from 'type-fest/source/readonly-deep'
+import { literal } from '@sofie-automation/corelib/dist/lib'
 
 export type * from '@sofie-automation/corelib/dist/overrideOpHelper'
 export {
@@ -27,3 +37,46 @@ export function useOverrideOpHelper<T extends object>(
 		return new OverrideOpHelperImpl(saveOverrides, objectWithOverridesRef.current)
 	}, [saveOverrides, objectWithOverridesRef])
 }
+
+/**
+ * A helper to work with modifying an ObjectWithOverrides<T> where T is a simple object (not an array of items)
+ */
+export function useOverrideOpHelperForSimpleObject<T extends object>(
+	saveOverrides: (newOps: SomeObjectOverrideOp[]) => void,
+	rawConfigObject: ReadonlyDeep<ObjectWithOverrides<T>>
+): {
+	wrappedItem: WrappedOverridableItemNormal<T>
+	overrideHelper: OverrideOpHelper
+} {
+	const [wrappedItem, wrappedConfigObject] = useMemo(() => {
+		const prefixedOps = rawConfigObject.overrides.map((op) => ({
+			...op,
+			// Fixup the paths to match the wrappedItem produced below
+			path: `0.${op.path}`,
+		}))
+
+		const computedValue = applyAndValidateOverrides(rawConfigObject).obj
+
+		const wrappedItem = literal<WrappedOverridableItemNormal<T>>({
+			type: 'normal',
+			id: '0',
+			computed: computedValue,
+			defaults: rawConfigObject.defaults,
+			overrideOps: prefixedOps,
+		})
+
+		const wrappedConfigObject: ObjectWithOverrides<T> = {
+			defaults: rawConfigObject.defaults as T,
+			overrides: prefixedOps,
+		}
+
+		return [wrappedItem, wrappedConfigObject]
+	}, [rawConfigObject])
+
+	const overrideHelper = useOverrideOpHelper(saveOverrides, wrappedConfigObject)
+
+	return {
+		wrappedItem,
+		overrideHelper,
+	}
+}