fix: implement editor ui

Author: Julusian

packages/webui/src/client/ui/Settings/components/triggeredActions/actionEditors/actionSelector/ActionSelector.tsx

@@ -15,6 +15,7 @@ import { preventOverflow } from '@popperjs/core'
 import { ToggleSwitchControl } from '../../../../../../lib/Components/ToggleSwitch'
 import { DropdownInputControl, DropdownInputOption } from '../../../../../../lib/Components/DropdownInput'
 import { IntInputControl } from '../../../../../../lib/Components/IntInput'
+import { SwitchRouteSetEditor } from './actionEditors/SwitchRouteSetEditor'
 
 interface IProps {
 	action: SomeAction
@@ -75,9 +76,7 @@ function getArguments(t: TFunction, action: SomeAction): string[] {
 		case PlayoutActions.resyncRundownPlaylist:
 			break
 		case PlayoutActions.switchRouteSet:
-			if (action.routeSetId) {
-				result.push(t('Route Set: {{routeSet}}', { routeSet: action.routeSetId }))
-			}
+			result.push(t('State "{{state}}"', { state: action.state }))
 			break
 		case ClientActions.shelf:
 			if (action.state === true) {
@@ -257,7 +256,7 @@ function getActionParametersEditor(
 		case PlayoutActions.activateAdlibTestingMode:
 			return null
 		case PlayoutActions.switchRouteSet:
-			return null
+			return <SwitchRouteSetEditor action={action} onChange={onChange} />
 		case PlayoutActions.disableNextPiece:
 			return (
 				<div className="mts">

packages/webui/src/client/ui/Settings/components/triggeredActions/actionEditors/actionSelector/actionEditors/SwitchRouteSetEditor.tsx

@@ -0,0 +1,85 @@
+import { useTranslation } from 'react-i18next'
+import { useTracker } from '../../../../../../../lib/ReactMeteorData/ReactMeteorData'
+import { Studios } from '../../../../../../../collections'
+import { DropdownInputControl, DropdownInputOption } from '../../../../../../../lib/Components/DropdownInput'
+import { SwitchRouteSetProps } from '@sofie-automation/corelib/dist/worker/studio'
+import { applyAndValidateOverrides } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
+import { StudioRouteSet } from '@sofie-automation/blueprints-integration'
+
+export function SwitchRouteSetEditor({
+	action,
+	onChange,
+}: Readonly<{
+	action: SwitchRouteSetProps
+	onChange: (newVal: Partial<typeof action>) => void
+}>): JSX.Element | null {
+	const { t } = useTranslation()
+	const allRouteSetOptions = useTracker<DropdownInputOption<string>[]>(
+		() => {
+			const studios = Studios.find({}, { sort: { name: 1 } }).fetch()
+			const routeSetOptions = studios.flatMap((studio) => {
+				const routeSets = applyAndValidateOverrides(studio.routeSetsWithOverrides).obj
+				return Object.entries<StudioRouteSet>(routeSets).map(
+					([id, routeSet]): Omit<DropdownInputOption<string>, 'i'> => ({
+						value: id,
+						name: studios.length > 1 ? `${studio.name} - ${routeSet.name}` : routeSet.name,
+					})
+				)
+			})
+
+			return routeSetOptions.map((option, i): DropdownInputOption<string> => ({ ...option, i }))
+		},
+		[],
+		[]
+	)
+
+	return (
+		<>
+			<div className="mts">
+				<label className="block">{t('Route Set')}</label>
+				<DropdownInputControl<typeof action.routeSetId>
+					classNames="input text-input input-m"
+					value={action.routeSetId}
+					options={allRouteSetOptions}
+					handleUpdate={(newVal) => {
+						onChange({
+							...action,
+							routeSetId: newVal,
+						})
+					}}
+				/>
+			</div>
+
+			<div className="mts">
+				<label className="block">{t('State')}</label>
+				<DropdownInputControl<typeof action.state>
+					classNames="input text-input input-m"
+					value={action.state}
+					options={[
+						{
+							name: t('Enabled'),
+							value: true,
+							i: 0,
+						},
+						{
+							name: t('Disabled'),
+							value: false,
+							i: 1,
+						},
+						{
+							name: t('Toggle'),
+							value: 'toggle',
+							i: 2,
+						},
+					]}
+					handleUpdate={(newVal) => {
+						onChange({
+							...action,
+							state: newVal,
+						})
+					}}
+				/>
+			</div>
+		</>
+	)
+}