Fix ontime aux actions (#1684)

* switch to base ui

* ensure all action types is part of the valitation

* update test

* atempt to do it in the base-ui way

* fix fixing

* allow undefide visible on set timer message

* fix set time not showing

* correct time data for aux set automation

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

apps/client/src/common/components/select/Select.module.scss

@@ -34,6 +34,11 @@
     cursor: not-allowed;
   }
 
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+
   &.fluid {
     width: 100%;
   }

apps/client/src/common/components/select/Select.tsx

@@ -11,6 +11,7 @@ interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
   options: {
     value: T;
     label: string;
+    disabled?: boolean;
   }[];
   fluid?: boolean;
 }
@@ -28,8 +29,8 @@ export default function Select<T>({ options, fluid, ...selectRootProps }: Select
         <BaseSelect.Positioner side='bottom' align='start'>
           <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
           <BaseSelect.Popup className={styles.popup}>
-            {options.map(({ label, value }) => (
-              <BaseSelect.Item key={String(value)} className={styles.item} value={value}>
+            {options.map(({ disabled, label, value }) => (
+              <BaseSelect.Item key={String(value)} className={styles.item} value={value} disabled={disabled}>
                 <BaseSelect.ItemIndicator className={styles.itemIndicator}>
                   <IoCheckmark className={styles.itemIndicatorIcon} />
                 </BaseSelect.ItemIndicator>

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

@@ -55,6 +55,7 @@ export default function AutomationForm(props: AutomationFormProps) {
     setError,
     setFocus,
     setValue,
+    watch,
     formState: { errors, isSubmitting, isDirty, isValid },
   } = useForm<AutomationDTO>({
     mode: 'onChange',
@@ -106,8 +107,7 @@ export default function AutomationForm(props: AutomationFormProps) {
   };
 
   const handleAddnewOntimeAction = () => {
-    // @ts-expect-error -- we dont want to choose an action
-    appendOutput({ type: 'ontime', action: undefined });
+    appendOutput({ type: 'ontime', action: 'aux1-start' });
   };
 
   const handleTestOSCOutput = async (index: number) => {
@@ -428,6 +428,7 @@ export default function AutomationForm(props: AutomationFormProps) {
                   register={register}
                   rowErrors={rowErrors}
                   setValue={setValue}
+                  watch={watch}
                 >
                   <span>&nbsp;</span>
                   <Panel.InlineElements relation='inner'>

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

@@ -1,10 +1,9 @@
 import { PropsWithChildren, useState } from 'react';
-import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
-import { Select } from '@chakra-ui/react';
-import { AutomationDTO, OntimeAction } from 'ontime-types';
+import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form';
+import { AutomationDTO, OntimeAction, OntimeActionKey, SecondarySource } from 'ontime-types';
 
 import Input from '../../../../common/components/input/input/Input';
-import { cx } from '../../../../common/utils/styleUtils';
+import Select from '../../../../common/components/select/Select';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './AutomationForm.module.scss';
@@ -20,53 +19,58 @@ interface OntimeActionFormProps {
     secondarySource?: { message?: string };
   };
   value: OntimeAction['action'];
+  watch: UseFormWatch<AutomationDTO>;
   setValue: UseFormSetValue<AutomationDTO>;
 }
 
 export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFormProps>) {
-  const { index, register, setValue, rowErrors, value, children } = props;
-  const [selectedAction, setSelectedAction] = useState<OntimeAction['action']>(value || 'aux-start');
+  const { index, register, setValue, rowErrors, value, children, watch } = props;
+  const [selectedAction, setSelectedAction] = useState<string>(value);
 
-  const updateSelectedAction = (value: string) => {
-    setSelectedAction(value as OntimeAction['action']);
-    setValue(`outputs.${index}.action`, value as OntimeAction['action']);
+  const handleSetAction = (value: OntimeActionKey) => {
+    setValue(`outputs.${index}.action`, value, { shouldDirty: true });
+    setSelectedAction(value);
   };
 
   return (
-    <div className={cx([style.actionSection, selectedAction && style[selectedAction]])}>
-      <input type='hidden' {...register(`outputs.${index}.action`)} value={selectedAction} />
+    <div className={style.actionSection}>
       <label>
         Action
         <Select
-          variant='ontime'
-          size='sm'
-          value={selectedAction}
-          onChange={(event) => updateSelectedAction(event.target.value)}
-        >
-          <option value='aux-start'>Aux 1: start</option>
-          <option value='aux-pause'>Aux 1: pause</option>
-          <option value='aux-stop'>Aux 1: stop</option>
-          <option value='aux-set'>Aux 2: set</option>
-          <option value='aux-start'>Aux 2: start</option>
-          <option value='aux-pause'>Aux 2: pause</option>
-          <option value='aux-stop'>Aux 2: stop</option>
-          <option value='aux-set'>Aux 2: set</option>
-          <option value='aux-start'>Aux 3: start</option>
-          <option value='aux-pause'>Aux 3: pause</option>
-          <option value='aux-stop'>Aux 3: stop</option>
-          <option value='aux-set'>Aux 3: set</option>
-          <option value='message-set'>Timer: timer message</option>
-          <option value='message-secondary'>Timer: timer secondary</option>
-        </Select>
+          onValueChange={(value) => {
+            handleSetAction(value as OntimeActionKey);
+          }}
+          value={watch(`outputs.${index}.action`)}
+          options={[
+            { value: 'aux1-pause', label: 'Aux 1: pause' },
+            { value: 'aux2-pause', label: 'Aux 2: pause' },
+            { value: 'aux3-pause', label: 'Aux 3: pause' },
+
+            { value: 'aux1-start', label: 'Aux 1: start' },
+            { value: 'aux2-start', label: 'Aux 2: start' },
+            { value: 'aux3-start', label: 'Aux 3: start' },
+
+            { value: 'aux1-stop', label: 'Aux 1: stop' },
+            { value: 'aux2-stop', label: 'Aux 2: stop' },
+            { value: 'aux3-stop', label: 'Aux 3: stop' },
+
+            { value: 'aux1-set', label: 'Aux 1: set' },
+            { value: 'aux2-set', label: 'Aux 2: set' },
+            { value: 'aux3-set', label: 'Aux 3: set' },
+
+            { value: 'message-set', label: 'Primary Message: set' },
+            { value: 'message-secondary', label: 'Secondary Message: source' },
+          ]}
+        />
         <Panel.Error>{rowErrors?.action?.message}</Panel.Error>
       </label>
 
-      {selectedAction === 'aux1-set' && (
+      {selectedAction.startsWith('aux') && selectedAction.endsWith('set') && (
         <label>
           New time
           <Input
             {...register(`outputs.${index}.time`, {
-              required: { value: true, message: 'Required field' },
+              required: { value: true, message: 'Required field' },  //TODO:(automation set aux) not sure what way around to have the string and where to have the ms value
             })}
             fluid
             placeholder='eg: 10m5s'
@@ -84,11 +88,19 @@ export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFo
           </label>
           <label>
             Visibility
-            <Select variant='ontime' size='sm' {...register(`outputs.${index}.visible`)}>
-              <option value=''>Untouched</option>
-              <option value='true'>Show</option>
-              <option value='false'>Hide</option>
-            </Select>
+            <Select
+              onValueChange={(value) => {
+                // we need to translate the undefined value to 'untouched'
+                const translatedValue = value === 'untouched' ? undefined : (value as boolean | undefined);
+                setValue(`outputs.${index}.visible`, translatedValue, { shouldDirty: true });
+              }}
+              value={watch(`outputs.${index}.visible`) === undefined ? 'untouched' : watch(`outputs.${index}.visible`)}
+              options={[
+                { value: 'untouched', label: 'Untouched' },
+                { value: true, label: 'Show' },
+                { value: false, label: 'Hide' },
+              ]}
+            />
             <Panel.Error>{rowErrors?.visible?.message}</Panel.Error>
           </label>
         </>
@@ -97,11 +109,20 @@ export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFo
       {selectedAction === 'message-secondary' && (
         <label>
           Timer secondary source
-          <Select variant='ontime' size='sm' {...register(`outputs.${index}.secondarySource`)}>
-            <option value='aux'>Auxiliary timer</option>
-            <option value='external'>External</option>
-            <option value='null'>None</option>
-          </Select>
+          <Select
+            onValueChange={(value) => {
+              setValue(`outputs.${index}.secondarySource`, value as SecondarySource, { shouldDirty: true });
+            }}
+            value={watch(`outputs.${index}.secondarySource`)}
+            options={[
+              { value: null, label: 'Select secondary source', disabled: true },
+              { 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' },
+            ]}
+          />
           <Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
         </label>
       )}