fix: automation form validation

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx

@@ -230,13 +230,18 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
               <div key={key} className={style.filterSection}>
                 <label>
                   Runtime data source
-                  <Select
-                    value={watch(`filters.${index}.field`)}
-                    onValueChange={(value: string | null) => {
+                  <Select<string | null>
+                    // need to normalize '' to null for the Select to show the placeholder
+                    value={watch(`filters.${index}.field`) || null}
+                    onValueChange={(value) => {
                       if (value === null) return;
                       setValue(`filters.${index}.field`, value, { shouldDirty: true });
                     }}
-                    options={fieldList.map(({ value, label }) => ({ value, label }))}
+                    options={fieldList.map(({ value, label }) => ({
+                      value,
+                      label,
+                      disabled: value === null,
+                    }))}
                     aria-label='Event field'
                   />
                   <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
@@ -288,7 +293,8 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
       <div className={style.innerColumn}>
         <h3>Outputs</h3>
         <Info>
-          Automation outputs can be used to send data from Ontime to external software.
+          Automation outputs can be used to send data from Ontime to external software <br />
+          or to change properties of Ontime itself.
           <ExternalLink href={integrationsDocsUrl}>See the documentation for templates</ExternalLink>
         </Info>
 

apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx

@@ -97,15 +97,14 @@ export default function OntimeActionForm({
           <label>
             Visibility
             <Select
-              onValueChange={(value: boolean | 'untouched' | null) => {
-                if (value === null) return;
-                // we need to translate the undefined value to 'untouched'
-                const translatedValue = value === 'untouched' ? undefined : (value as boolean | undefined);
+              onValueChange={(value) => {
+                // we need to translate the null to undefined so it becomes 'untouched'
+                const translatedValue = value === null ? undefined : value;
                 setValue(`outputs.${index}.visible`, translatedValue, { shouldDirty: true });
               }}
-              value={watch(`outputs.${index}.visible`) === undefined ? 'untouched' : watch(`outputs.${index}.visible`)}
+              value={watch(`outputs.${index}.visible`)}
               options={[
-                { value: 'untouched', label: 'Untouched' },
+                { value: null, label: 'Untouched' },
                 { value: true, label: 'Show' },
                 { value: false, label: 'Hide' },
               ]}
@@ -118,10 +117,16 @@ export default function OntimeActionForm({
       {selectedAction === 'message-secondary' && (
         <label>
           Timer secondary source
-          <Select
-            onValueChange={(value: SecondarySource | null) => {
+          <Select<SecondarySource | 'null' | null>
+            onValueChange={(value) => {
+              // null -> no selection
               if (value === null) return;
-              setValue(`outputs.${index}.secondarySource`, value as SecondarySource, { shouldDirty: true });
+              // 'null' -> clear the secondary source
+              if (value === 'null') {
+                setValue(`outputs.${index}.secondarySource`, null, { shouldDirty: true });
+                return;
+              }
+              setValue(`outputs.${index}.secondarySource`, value, { shouldDirty: true });
             }}
             value={watch(`outputs.${index}.secondarySource`)}
             options={[
@@ -129,13 +134,14 @@ export default function OntimeActionForm({
               { value: 'aux1', label: 'Auxiliary timer 1' },
               { value: 'aux2', label: 'Auxiliary timer 2' },
               { value: 'aux3', label: 'Auxiliary timer 3' },
-              { value: 'external', label: 'External' },
-              { value: 'null', label: 'None' },
+              { value: 'secondary', label: 'Secondary' },
+              { value: 'null', label: 'None' }, // allow the user to clear the secondary source
             ]}
           />
           <Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
         </label>
       )}
+
       <div className={style.test}>{children}</div>
     </div>
   );

apps/client/src/features/app-settings/panel/automations-panel/automationUtils.ts

@@ -27,6 +27,7 @@ export function isAutomation(automation: AutomationDTO | Automation): automation
 }
 
 const staticSelectProperties = [
+  { value: null, label: 'Select field' },
   { value: 'eventNow.id', label: 'ID' },
   { value: 'eventNow.title', label: 'Title' },
   { value: 'eventNow.cue', label: 'Cue' },
@@ -42,7 +43,7 @@ const staticNextSelectProperties = [
 ];
 
 type SelectableField = {
-  value: string; // string encodes path in runtime state object
+  value: string | null; // string encodes path in runtime state object
   label: string;
 };