Integrations data (#770)

* feat: OSC settings

* feat: HTTP settings

apps/client/src/features/app-settings/panel/integrations-panel/HttpIntegrations.tsx

@@ -1,29 +1,94 @@
+import { useFieldArray, useForm } from 'react-hook-form';
 import { Button, IconButton, Input, Select, Switch } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
+import { HttpSettings } from 'ontime-types';
+import { generateId } from 'ontime-utils';
 
+import { maybeAxiosError } from '../../../../common/api/apiUtils';
+import { useHttpSettings, usePostHttpSettings } from '../../../../common/hooks-query/useHttpSettings';
+import { isKeyEscape } from '../../../../common/utils/keyEvent';
+import { startsWithHttp } from '../../../../common/utils/regex';
 import * as Panel from '../PanelUtils';
 
-import { cycles } from './IntegrationsPanel';
+import { cycles } from './integrationUtils';
 
 import style from './IntegrationsPanel.module.css';
 
-const demoIntegrations = [
-  { id: 1, enabled: true, cycle: 'onLoad', message: '/ontime/scene/1' },
-  { id: 2, enabled: true, cycle: 'onLoad', message: '/ontime/scene/2' },
-  { id: 3, enabled: true, cycle: 'onLoad', message: '/ontime/scene/3' },
-  { id: 4, enabled: true, cycle: 'onLoad', message: '/ontime/scene/4' },
-];
-
 export default function HttpIntegrations() {
+  const { data } = useHttpSettings();
+  const { mutateAsync } = usePostHttpSettings();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    register,
+    setError,
+    formState: { errors, isSubmitting, isDirty, isValid },
+  } = useForm<HttpSettings>({
+    mode: 'onBlur',
+    defaultValues: data,
+    values: data,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  const { fields, prepend, remove } = useFieldArray({
+    name: 'subscriptions',
+    control,
+  });
+
+  const onSubmit = async (values: HttpSettings) => {
+    try {
+      await mutateAsync(values);
+    } catch (error) {
+      setError('root', { message: maybeAxiosError(error) });
+    }
+  };
+
+  const preventEscape = (event: React.KeyboardEvent) => {
+    if (isKeyEscape(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  const handleAddNewSubscription = () => {
+    prepend({
+      id: generateId(),
+      cycle: 'onLoad',
+      message: '',
+      enabled: false,
+    });
+  };
+
+  const handleDeleteSubscription = (index: number) => {
+    remove(index);
+  };
+
+  const canSubmit = !isSubmitting && isDirty && isValid;
+
   return (
-    <Panel.Section>
+    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
       <Panel.Section>
-        <Panel.SubHeader>HTTP integrations</Panel.SubHeader>
+        <Panel.SubHeader>
+          HTTP settings
+          <div className={style.flex}>
+            <Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
+              Reset
+            </Button>
+            <Button variant='ontime-filled' size='sm' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
+              Save changes
+            </Button>
+          </div>
+        </Panel.SubHeader>
+        {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
         <Panel.ListGroup>
           <Panel.ListItem>
             <Panel.Field title='HTTP Output' description='Provide feedback from Ontime through HTTP' />
-            <Switch variant='ontime' size='lg' />
+            <Switch variant='ontime' size='lg' {...register('enabledOut')} />
           </Panel.ListItem>
         </Panel.ListGroup>
       </Panel.Section>
@@ -32,51 +97,75 @@ export default function HttpIntegrations() {
         <Panel.Card>
           <Panel.SubHeader>
             HTTP Integration
-            <Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={() => undefined}>
+            <Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}>
               New
             </Button>
           </Panel.SubHeader>
-          <Panel.Paragraph>Integration Settings for OSC protocol</Panel.Paragraph>
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th>Enabled</th>
-                <th>Cycle</th>
-                <th className={style.fullWidth}>Message</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {demoIntegrations.map((integration) => (
-                <tr key={integration.id}>
-                  <td>
-                    <Switch variant='ontime' />
-                  </td>
-                  <td className={style.autoWidth}>
-                    <Select size='sm' variant='ontime' className={style.fitContents}>
-                      {cycles.map((cycle) => (
-                        <option key={cycle.id} value={cycle.value}>
-                          {cycle.label}
-                        </option>
-                      ))}
-                    </Select>
-                  </td>
-                  <td className={style.fullWidth}>
-                    <Input size='sm' variant='ontime-filled' value={integration.message} />
-                  </td>
-                  <td>
-                    <IconButton
-                      size='sm'
-                      variant='ontime-ghosted'
-                      color='#FA5656' // $red-500
-                      icon={<IoTrash />}
-                      aria-label='Delete entry'
-                    />
-                  </td>
+          {fields.length > 0 && (
+            <Panel.Table>
+              <thead>
+                <tr>
+                  <th>Enabled</th>
+                  <th>Cycle</th>
+                  <th className={style.fullWidth}>Message</th>
+                  <th />
                 </tr>
-              ))}
-            </tbody>
-          </Panel.Table>
+              </thead>
+              <tbody>
+                {fields.map((integration, index) => {
+                  // @ts-expect-error -- not sure why it is not finding the type, it is ok
+                  const maybeError = errors.subscriptions?.[index]?.message?.message;
+                  return (
+                    <tr key={integration.id}>
+                      <td>
+                        <Switch variant='ontime' {...register(`subscriptions.${index}.enabled`)} />
+                      </td>
+                      <td className={style.autoWidth}>
+                        <Select
+                          size='sm'
+                          variant='ontime'
+                          className={style.fitContents}
+                          {...register(`subscriptions.${index}.cycle`)}
+                        >
+                          {cycles.map((cycle) => (
+                            <option key={cycle.id} value={cycle.value}>
+                              {cycle.label}
+                            </option>
+                          ))}
+                        </Select>
+                      </td>
+                      <td className={style.fullWidth}>
+                        <Input
+                          size='sm'
+                          variant='ontime-filled'
+                          autoComplete='off'
+                          placeholder='http://third-party/vt1/{{timer.current}}'
+                          {...register(`subscriptions.${index}.message`, {
+                            required: { value: true, message: 'Required field' },
+                            pattern: {
+                              value: startsWithHttp,
+                              message: 'HTTP messages should start with http://',
+                            },
+                          })}
+                        />
+                        {maybeError && <Panel.Error>{maybeError}</Panel.Error>}
+                      </td>
+                      <td>
+                        <IconButton
+                          size='sm'
+                          variant='ontime-ghosted'
+                          color='#FA5656' // $red-500
+                          icon={<IoTrash />}
+                          aria-label='Delete entry'
+                          onClick={() => handleDeleteSubscription(index)}
+                        />
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </Panel.Table>
+          )}
         </Panel.Card>
       </Panel.Section>
     </Panel.Section>