From 3248aec154a4642c4a23c6b206d09f50b86b146f Mon Sep 17 00:00:00 2001
From: Julian Waller <git@julusian.co.uk>
Date: Mon, 30 Sep 2024 15:23:48 +0100
Subject: [PATCH] wip: update for types

---
 .../RenderUserEditOperations.tsx              | 33 +++++++--------
 .../ui/SegmentTimeline/SegmentTimeline.tsx    | 42 ++++++++++++-------
 2 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/packages/webui/src/client/ui/SegmentTimeline/RenderUserEditOperations.tsx b/packages/webui/src/client/ui/SegmentTimeline/RenderUserEditOperations.tsx
index e493f5bc50..db5d41ca66 100644
--- a/packages/webui/src/client/ui/SegmentTimeline/RenderUserEditOperations.tsx
+++ b/packages/webui/src/client/ui/SegmentTimeline/RenderUserEditOperations.tsx
@@ -15,46 +15,43 @@ export function RenderUserEditOperations(
 	isFormEditable: boolean,
 	rundownId: RundownId,
 	targetName: string,
-	userEdits: CoreUserEditingDefinition[] | undefined,
-	userEditStates: Record<string, boolean> | undefined,
+	userEditOperations: CoreUserEditingDefinition[] | undefined,
 	operationTarget: UserOperationTarget
 ): React.JSX.Element | null {
 	const t = i18nTranslator
-	if (!userEdits || userEdits.length === 0) return null
+	if (!userEditOperations || userEditOperations.length === 0) return null
 	return (
 		<>
 			<hr />
-			{userEdits.map((userEdit, i) => {
-				switch (userEdit.type) {
+			{userEditOperations.map((userEditOperation, i) => {
+				switch (userEditOperation.type) {
 					case UserEditingType.ACTION:
 						return (
 							<MenuItem
-								key={`${userEdit.id}_${i}`}
+								key={`${userEditOperation.id}_${i}`}
 								onClick={(e) => {
 									doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
 										MeteorCall.userAction.executeUserChangeOperation(e, ts, rundownId, operationTarget, {
-											id: userEdit.id,
+											id: userEditOperation.id,
 										})
 									)
 								}}
 							>
 								{
 									// ToDo: use CSS to Style state instead of asterix
-									userEditStates && userEditStates[userEdit.id] ? (
-										<span className="action-protected">{userEditStates[userEdit.id].valueOf() ? '• ' : ''}</span>
-									) : null
+									userEditOperation.isActive ? <span className="action-protected">{'• '}</span> : null
 								}
-								<span>{translateMessage(userEdit.label, i18nTranslator)}</span>
+								<span>{translateMessage(userEditOperation.label, i18nTranslator)}</span>
 							</MenuItem>
 						)
 					case UserEditingType.FORM:
 						return (
 							<MenuItem
 								disabled={!isFormEditable}
-								key={`${userEdit.id}_${i}`}
+								key={`${userEditOperation.id}_${i}`}
 								onClick={(e) => {
-									const schema = JSONBlobParse(userEdit.schema)
-									const values = clone(userEdit.currentValues)
+									const schema = JSONBlobParse(userEditOperation.schema)
+									const values = clone(userEditOperation.currentValues)
 
 									// TODO:
 									doModalDialog({
@@ -63,7 +60,7 @@ export function RenderUserEditOperations(
 											<SchemaFormInPlace
 												schema={schema}
 												object={values}
-												translationNamespaces={userEdit.translationNamespaces}
+												translationNamespaces={userEditOperation.translationNamespaces}
 											/>
 										),
 										// acceptText: 'OK',
@@ -73,18 +70,18 @@ export function RenderUserEditOperations(
 											doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
 												MeteorCall.userAction.executeUserChangeOperation(e, ts, rundownId, operationTarget, {
 													...values,
-													id: userEdit.id,
+													id: userEditOperation.id,
 												})
 											)
 										},
 									})
 								}}
 							>
-								<span>{translateMessage(userEdit.label, i18nTranslator)}</span>
+								<span>{translateMessage(userEditOperation.label, i18nTranslator)}</span>
 							</MenuItem>
 						)
 					default:
-						assertNever(userEdit)
+						assertNever(userEditOperation)
 						return null
 				}
 			})}
diff --git a/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx b/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx
index 4ed05fe657..ab93f820c5 100644
--- a/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx
+++ b/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx
@@ -37,7 +37,7 @@ import { wrapPartToTemporaryInstance } from '@sofie-automation/meteor-lib/dist/c
 import { SegmentTimelineSmallPartFlag } from './SmallParts/SegmentTimelineSmallPartFlag'
 import { UIStateStorage } from '../../lib/UIStateStorage'
 import { getPartInstanceTimingId, RundownTimingContext } from '../../lib/rundownTiming'
-import { IOutputLayer, ISourceLayer, NoteSeverity } from '@sofie-automation/blueprints-integration'
+import { IOutputLayer, ISourceLayer, NoteSeverity, UserEditingType } from '@sofie-automation/blueprints-integration'
 import { SegmentTimelineZoomButtons } from './SegmentTimelineZoomButtons'
 import { SegmentViewMode } from '../SegmentContainer/SegmentViewModes'
 import { SwitchViewModeButton } from '../SegmentContainer/SwitchViewModeButton'
@@ -55,6 +55,7 @@ import {
 import { SegmentTimeAnchorTime } from '../RundownView/RundownTiming/SegmentTimeAnchorTime'
 import { logger } from '../../lib/logging'
 import * as RundownResolver from '../../lib/RundownResolver'
+import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
 
 interface IProps {
 	id: string
@@ -1099,20 +1100,7 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 							))}
 						</div>
 					)}
-					<div className="segment-timeline__title__user-edit-states">
-						{this.props.segment.userEditStates &&
-							Object.keys(this.props.segment.userEditStates).map((key) =>
-								this.props.segment.userEditStates?.[key] ? (
-									<div
-										key={key}
-										className="segment-timeline__title__user-edit-state"
-										dangerouslySetInnerHTML={{
-											__html: this.props.segment.userEdits?.filter((i) => i.id === key)[0]?.svgIcon ?? '',
-										}}
-									></div>
-								) : null
-							)}
-					</div>
+					<HeaderEditStates userEditOperations={this.props.segment.userEditOperations} />
 				</ContextMenuTrigger>
 				<div className="segment-timeline__duration" tabIndex={0}>
 					{this.props.playlist &&
@@ -1245,3 +1233,27 @@ export const SegmentTimeline = withTranslation()(
 		}
 	})(SegmentTimelineClass)
 )
+
+interface HeaderEditStatesProps {
+	userEditOperations: DBSegment['userEditOperations']
+}
+function HeaderEditStates({ userEditOperations }: HeaderEditStatesProps) {
+	return (
+		<div className="segment-timeline__title__user-edit-states">
+			{userEditOperations &&
+				userEditOperations.map((operation) => {
+					if (operation.type === UserEditingType.FORM || !operation.svgIcon || !operation.isActive) return null
+
+					return (
+						<div
+							key={operation.id}
+							className="segment-timeline__title__user-edit-state"
+							dangerouslySetInnerHTML={{
+								__html: operation.svgIcon,
+							}}
+						></div>
+					)
+				})}
+		</div>
+	)
+}