chore: support translations for properties panel

Author: Mint de Wit

packages/blueprints-integration/src/documents/part.ts

@@ -93,7 +93,7 @@ export interface IBlueprintMutatablePart<TPrivateData = unknown, TPublicData = u
 	 * Properties that are user editable from the properties panel in the Sofie UI, if the user saves changes to these
 	 * it will trigger a user edit operation of type DefaultUserOperationEditProperties
 	 */
-	userEditProperties?: Readonly<UserEditingProperties>
+	userEditProperties?: UserEditingProperties
 }
 
 export interface HackPartMediaObjectSubscription {

packages/blueprints-integration/src/userEditing.ts

@@ -74,9 +74,10 @@ export enum UserEditingType {
 }
 
 export interface UserEditingSourceLayer {
-	sourceLayerLabel: string // translate? take from type?
+	sourceLayerLabel: string
 	sourceLayerType: SourceLayerType
 	schema: JSONBlob<JSONSchema>
+	defaultValue?: Record<string, any>
 }
 
 export enum UserEditingButtonType {
@@ -124,7 +125,6 @@ export interface UserEditingProperties {
 	/**
 	 * A list of id's of operations to be exposed on the properties panel as buttons. These operations
 	 * must be available on the element
-	 *
 	 */
 	operations?: UserEditingDefinitionAction[]
 }

packages/corelib/src/dataModel/Part.ts

@@ -3,7 +3,7 @@ import { ITranslatableMessage } from '../TranslatableMessage'
 import { PartId, RundownId, SegmentId } from './Ids'
 import { PartNote } from './Notes'
 import { ReadonlyDeep } from 'type-fest'
-import { CoreUserEditingDefinition, UserEditingProperties } from './UserEditingDefinitions'
+import { CoreUserEditingDefinition, CoreUserEditingProperties } from './UserEditingDefinitions'
 
 export interface PartInvalidReason {
 	message: ITranslatableMessage
@@ -46,7 +46,7 @@ export interface DBPart extends Omit<IBlueprintPart, 'userEditOperations'> {
 	 * Properties that are user editable from the properties panel in the Sofie UI, if the user saves changes to these
 	 * it will trigger a user edit operation of type DefaultUserOperationEditProperties
 	 */
-	userEditProperties?: UserEditingProperties
+	userEditProperties?: CoreUserEditingProperties
 }
 
 export function isPartPlayable(part: Pick<ReadonlyDeep<DBPart>, 'invalid' | 'floated'>): boolean {

packages/corelib/src/dataModel/Segment.ts

@@ -1,7 +1,7 @@
 import { SegmentDisplayMode, SegmentTimingInfo } from '@sofie-automation/blueprints-integration'
 import { SegmentId, RundownId } from './Ids'
 import { SegmentNote } from './Notes'
-import { CoreUserEditingDefinition, UserEditingProperties } from './UserEditingDefinitions'
+import { CoreUserEditingDefinition, CoreUserEditingProperties } from './UserEditingDefinitions'
 
 export enum SegmentOrphanedReason {
 	/** Segment is deleted from the NRCS but we still need it */
@@ -56,5 +56,5 @@ export interface DBSegment {
 	 * Properties that are user editable from the properties panel in the Sofie UI, if the user saves changes to these
 	 * it will trigger a user edit operation of type DefaultUserOperationEditProperties
 	 */
-	userEditProperties?: UserEditingProperties
+	userEditProperties?: CoreUserEditingProperties
 }

packages/corelib/src/dataModel/UserEditingDefinitions.ts

@@ -67,7 +67,7 @@ export interface CoreUserEditingDefinitionSourceLayerForm {
 	}
 }
 
-export interface UserEditingProperties {
+export interface CoreUserEditingProperties {
 	/**
 	 * These properties are dependent on the (primary) piece type, the user will get the option
 	 * to select the type of piece (from the SourceLayerTypes i.e. Camera or Split etc.) and then
@@ -106,5 +106,8 @@ export interface UserEditingProperties {
 	 *
 	 * note - perhaps these should have their own full definitions?
 	 */
-	operations?: string[]
+	operations?: CoreUserEditingDefinitionAction[]
+
+	/** Translation namespaces to use when rendering this form */
+	translationNamespaces: string[]
 }

packages/documentation/docs/for-developers/json-config-schema.md

@@ -43,7 +43,12 @@ If an integer property, whether to treat it as zero-based
 ### `ui:displayType`
 
 Override the presentation with a special mode.
-Currently only valid for string properties. Valid values are 'json'.
+
+Currently only valid for:
+
+- object properties. Valid values are 'json'.
+- string properties. Valid values are 'base64-image'.
+- boolean properties. Valid values are 'switch'.
 
 ### `tsEnumNames`
 

packages/job-worker/src/blueprints/context/lib.ts

@@ -14,7 +14,7 @@ import {
 	CoreUserEditingDefinitionAction,
 	CoreUserEditingDefinitionForm,
 	CoreUserEditingDefinitionSourceLayerForm,
-	UserEditingProperties,
+	CoreUserEditingProperties,
 } from '@sofie-automation/corelib/dist/dataModel/UserEditingDefinitions'
 import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
 import { assertNever, clone, Complete, literal, omit } from '@sofie-automation/corelib/dist/lib'
@@ -59,6 +59,7 @@ import {
 	UserEditingDefinitionAction,
 	UserEditingDefinitionForm,
 	UserEditingDefinitionSourceLayerForm,
+	UserEditingProperties,
 	UserEditingType,
 } from '@sofie-automation/blueprints-integration/dist/userEditing'
 import type { PlayoutMutatablePart } from '../../playout/model/PlayoutPartInstanceModel'
@@ -283,7 +284,7 @@ export function convertPartToBlueprints(part: ReadonlyDeep<DBPart>): IBlueprintP
 			part.hackListenToMediaObjectUpdates
 		),
 		userEditOperations: translateUserEditsToBlueprint(part.userEditOperations),
-		userEditProperties: clone<UserEditingProperties | undefined>(part.userEditProperties),
+		userEditProperties: translateUserEditPropertiesToBlueprint(part.userEditProperties),
 	}
 
 	return obj
@@ -352,7 +353,7 @@ export function convertSegmentToBlueprints(segment: ReadonlyDeep<DBSegment>): IB
 		showShelf: segment.showShelf,
 		segmentTiming: segment.segmentTiming,
 		userEditOperations: translateUserEditsToBlueprint(segment.userEditOperations),
-		userEditProperties: clone<UserEditingProperties | undefined>(segment.userEditProperties),
+		userEditProperties: translateUserEditPropertiesToBlueprint(segment.userEditProperties),
 	}
 
 	return obj
@@ -544,6 +545,30 @@ function translateUserEditsToBlueprint(
 	)
 }
 
+function translateUserEditPropertiesToBlueprint(
+	props: ReadonlyDeep<CoreUserEditingProperties> | undefined
+): UserEditingProperties | undefined {
+	if (!props) return undefined
+
+	return {
+		globalProperties: props.globalProperties,
+		pieceTypeProperties: props.pieceTypeProperties,
+
+		operations: props.operations?.map(
+			(userEdit) =>
+				({
+					type: UserEditingType.ACTION,
+					id: userEdit.id,
+					label: omit(userEdit.label, 'namespaces'),
+					svgIcon: userEdit.svgIcon,
+					svgIconInactive: userEdit.svgIconInactive,
+					isActive: userEdit.isActive,
+					buttonType: userEdit.buttonType,
+				} satisfies Complete<UserEditingDefinitionAction>)
+		),
+	}
+}
+
 export function translateUserEditsFromBlueprint(
 	userEdits: UserEditingDefinition[] | undefined,
 	blueprintIds: BlueprintId[]
@@ -589,6 +614,33 @@ export function translateUserEditsFromBlueprint(
 	)
 }
 
+export function translateUserEditPropertiesFromBlueprint(
+	props: UserEditingProperties | undefined,
+	blueprintIds: BlueprintId[]
+): CoreUserEditingProperties | undefined {
+	if (!props) return undefined
+
+	return {
+		globalProperties: clone(props.globalProperties),
+		pieceTypeProperties: clone(props.pieceTypeProperties),
+
+		operations: props.operations?.map(
+			(userEdit) =>
+				({
+					type: UserEditingType.ACTION,
+					id: userEdit.id,
+					label: wrapTranslatableMessageFromBlueprints(userEdit.label, blueprintIds),
+					svgIcon: userEdit.svgIcon,
+					svgIconInactive: userEdit.svgIconInactive,
+					isActive: userEdit.isActive,
+					buttonType: userEdit.buttonType,
+				} satisfies Complete<UserEditingDefinitionAction>)
+		),
+
+		translationNamespaces: blueprintIds.map((id) => `blueprint_${id}`),
+	}
+}
+
 export function convertPartialBlueprintMutablePartToCore(
 	updatePart: Partial<IBlueprintMutatablePart>,
 	blueprintId: BlueprintId
@@ -606,5 +658,13 @@ export function convertPartialBlueprintMutablePartToCore(
 		delete playoutUpdatePart.userEditOperations
 	}
 
+	if ('userEditProperties' in updatePart) {
+		playoutUpdatePart.userEditProperties = translateUserEditPropertiesFromBlueprint(updatePart.userEditProperties, [
+			blueprintId,
+		])
+	} else {
+		delete playoutUpdatePart.userEditOperations
+	}
+
 	return playoutUpdatePart
 }

packages/job-worker/src/ingest/generationSegment.ts

@@ -24,7 +24,7 @@ import { IngestReplacePartType, IngestSegmentModel } from './model/IngestSegment
 import { ReadonlyDeep } from 'type-fest'
 import { Rundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
 import { WrappedShowStyleBlueprint } from '../blueprints/cache'
-import { translateUserEditsFromBlueprint } from '../blueprints/context/lib'
+import { translateUserEditPropertiesFromBlueprint, translateUserEditsFromBlueprint } from '../blueprints/context/lib'
 
 async function getWatchedPackagesHelper(
 	context: JobContext,
@@ -293,6 +293,9 @@ function updateModelWithGeneratedSegment(
 			userEditOperations: translateUserEditsFromBlueprint(blueprintSegment.segment.userEditOperations, [
 				blueprintId,
 			]),
+			userEditProperties: translateUserEditPropertiesFromBlueprint(blueprintSegment.segment.userEditProperties, [
+				blueprintId,
+			]),
 		})
 	)
 
@@ -376,6 +379,9 @@ function updateModelWithGeneratedPart(
 			  }
 			: undefined,
 		userEditOperations: translateUserEditsFromBlueprint(blueprintPart.part.userEditOperations, [blueprintId]),
+		userEditProperties: translateUserEditPropertiesFromBlueprint(blueprintPart.part.userEditProperties, [
+			blueprintId,
+		]),
 	})
 
 	// Update pieces

packages/webui/src/client/styles/propertiesPanel.scss

@@ -96,8 +96,9 @@
 			}
 			> .propertiespanel-pop-up_close {
 				height: 1em;
-				cursor: pointer;
 				margin-left: 1em;
+				background-color: unset;
+				border: none;
 			}
 		}