feat: improve preset building

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -106,6 +106,7 @@ $inner-padding: 1rem;
   th,
   td {
     padding: 0.5rem;
+    vertical-align: top;
   }
 
   tr:nth-child(even) {

apps/client/src/features/app-settings/panel/feature-panel/FeaturePanel.tsx

@@ -6,7 +6,7 @@ import InfoNif from '../network-panel/NetworkInterfaces';
 
 import GenerateLinkFormExport from './GenerateLinkFormExport';
 import ReportSettings from './ReportSettings';
-import UrlPresetsForm from './UrlPresetsForm';
+import URLPresets from './URLPresets';
 
 export default function FeaturePanel({ location }: PanelBaseProps) {
   const presetsRef = useScrollIntoView<HTMLDivElement>('presets', location);
@@ -17,7 +17,7 @@ export default function FeaturePanel({ location }: PanelBaseProps) {
     <>
       <Panel.Header>Sharing and reporting</Panel.Header>
       <div ref={presetsRef}>
-        <UrlPresetsForm />
+        <URLPresets />
       </div>
       <div ref={linkRef}>
         <Panel.Section>

apps/client/src/features/app-settings/panel/feature-panel/GenerateLinkFormExport.tsx

@@ -33,7 +33,7 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
       { value: '', label: 'Companion' },
       ...urlPresetData.map((preset) => ({
         value: preset.alias,
-        label: `Preset: ${preset.alias}`,
+        label: `URL Preset: ${preset.alias}`,
       })),
     ];
   }, [lockedPath, urlPresetData]);

apps/client/src/features/app-settings/panel/feature-panel/URLPresets.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { IoAdd, IoOpenOutline, IoPencil, IoTrash } from 'react-icons/io5';
+import { URLPreset } from 'ontime-types';
+
+import Button from '../../../../common/components/buttons/Button';
+import IconButton from '../../../../common/components/buttons/IconButton';
+import Info from '../../../../common/components/info/Info';
+import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import Switch from '../../../../common/components/switch/Switch';
+import useUrlPresets, { useUpdateUrlPreset } from '../../../../common/hooks-query/useUrlPresets';
+import { handleLinks } from '../../../../common/utils/linkUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+import URLPresetForm from './composite/URLPresetForm';
+
+type FormState = {
+  isOpen: boolean;
+  preset?: URLPreset;
+};
+
+const urlPresetsDocs = 'https://docs.getontime.no/features/url-presets/';
+
+export default function URLPresets() {
+  const [formState, setFormState] = useState<FormState>({ isOpen: false, preset: undefined });
+  const { data, status } = useUrlPresets();
+  const { deletePreset, isMutating } = useUpdateUrlPreset();
+
+  const openNewForm = () => setFormState({ isOpen: true });
+  const openEditForm = (preset: URLPreset) => setFormState({ isOpen: true, preset });
+  const closeForm = () => setFormState({ isOpen: false, preset: undefined });
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>
+          URL presets
+          <Button onClick={openNewForm}>
+            New <IoAdd />
+          </Button>
+        </Panel.SubHeader>
+        <Panel.Divider />
+        <Panel.Section>
+          <Info>
+            URL presets are user pre-defined aliases to Ontime URLs.
+            <br />
+            This URL can contain full configuration including parameters, or simply route to a specific view.
+            <br />
+            <br />
+            The easiest way to get started is to copy an URL from your browser and paste it into the form.
+            <ExternalLink href={urlPresetsDocs}>See the docs</ExternalLink>
+          </Info>
+        </Panel.Section>
+        <Panel.Section>
+          <Panel.Loader isLoading={status === 'pending'} />
+          {formState.isOpen && <URLPresetForm urlPreset={formState.preset} onClose={closeForm} />}
+          <Panel.Table>
+            <thead>
+              <tr>
+                <th>Enabled</th>
+                <th>Alias</th>
+                <th>Target view</th>
+                <th>URL parameters</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {data.length === 0 && <Panel.TableEmpty handleClick={openNewForm} />}
+              {data.map((preset, index) => {
+                return (
+                  <tr key={preset.alias}>
+                    <td>
+                      <Switch defaultChecked={preset.enabled} onCheckedChange={() => {}} />
+                    </td>
+                    <td>{preset.alias}</td>
+                    <td>{preset.target}</td>
+                    <td>{preset.search}</td>
+                    <Panel.InlineElements relation='inner' as='td'>
+                      <IconButton
+                        variant='ghosted-white'
+                        onClick={(event) => handleLinks(preset.alias, event)}
+                        disabled={isMutating}
+                      >
+                        <IoOpenOutline />
+                      </IconButton>
+                      <IconButton
+                        onClick={() => openEditForm(preset)}
+                        variant='ghosted-white'
+                        aria-label='Edit entry'
+                        data-testid={`field__edit_${index}`}
+                        disabled={isMutating}
+                      >
+                        <IoPencil />
+                      </IconButton>
+                      <IconButton
+                        onClick={() => deletePreset(preset.alias)}
+                        variant='ghosted-destructive'
+                        aria-label='Delete entry'
+                        data-testid={`field__delete_${index}`}
+                        disabled={isMutating}
+                      >
+                        <IoTrash />
+                      </IconButton>
+                    </Panel.InlineElements>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </Panel.Table>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}

apps/client/src/features/app-settings/panel/feature-panel/UrlPresetsForm.tsx

@@ -1,230 +0,0 @@
-import { useEffect } from 'react';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { IoAdd, IoOpenOutline, IoTrash } from 'react-icons/io5';
-import { URLPreset } from 'ontime-types';
-
-import { postUrlPresets } from '../../../../common/api/urlPresets';
-import { maybeAxiosError } from '../../../../common/api/utils';
-import Button from '../../../../common/components/buttons/Button';
-import IconButton from '../../../../common/components/buttons/IconButton';
-import Info from '../../../../common/components/info/Info';
-import Input from '../../../../common/components/input/input/Input';
-import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
-import Switch from '../../../../common/components/switch/Switch';
-import Tooltip from '../../../../common/components/tooltip/Tooltip';
-import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
-import { preventEscape } from '../../../../common/utils/keyEvent';
-import { handleLinks } from '../../../../common/utils/linkUtils';
-import { validateUrlPresetPath } from '../../../../common/utils/urlPresets';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-import style from './FeaturePanel.module.scss';
-
-const urlPresetsDocs = 'https://docs.getontime.no/features/url-presets/';
-
-type FormData = {
-  data: URLPreset[];
-};
-
-export default function UrlPresetsForm() {
-  'use no memo'; // RHF and react-compiler don't seem to get along
-  const { data, status, refetch } = useUrlPresets();
-  const {
-    control,
-    handleSubmit,
-    register,
-    reset,
-    setError,
-    watch,
-    setValue,
-    formState: { isSubmitting, isDirty, isValid, errors },
-  } = useForm<FormData>({
-    mode: 'onChange',
-    defaultValues: { data },
-    values: { data },
-    resetOptions: {
-      keepDirtyValues: true,
-    },
-  });
-  const { fields, prepend, remove } = useFieldArray({
-    name: 'data',
-    control,
-  });
-
-  // reset form if we get new data from backend
-  useEffect(() => {
-    if (data) {
-      reset({ data });
-    }
-  }, [data, reset]);
-
-  const onSubmit = async (formData: FormData) => {
-    for (let i = 0; i < formData.data.length; i++) {
-      const preset = formData.data[i];
-      const { isValid, message } = validateUrlPresetPath(preset.pathAndParams);
-      if (!isValid) {
-        setError(`data.${i}.pathAndParams`, { message });
-        return;
-      }
-    }
-
-    try {
-      await postUrlPresets(formData.data);
-    } catch (error) {
-      const message = maybeAxiosError(error);
-      setError('root', { message });
-    } finally {
-      await refetch();
-    }
-  };
-
-  const onReset = () => {
-    reset({ data });
-  };
-
-  const addNew = () => {
-    prepend({
-      enabled: true,
-      alias: '',
-      pathAndParams: '',
-    });
-  };
-
-  const isLoading = status === 'pending';
-  const canSubmit = !isSubmitting && isDirty && isValid;
-
-  return (
-    <Panel.Section
-      as='form'
-      onSubmit={handleSubmit(onSubmit)}
-      onKeyDown={(event) => preventEscape(event, onReset)}
-      data-testid='url-preset-form'
-    >
-      <Panel.Card>
-        <Panel.SubHeader>
-          URL presets
-          <Panel.InlineElements>
-            <Button variant='ghosted' onClick={onReset} disabled={!canSubmit}>
-              Revert to saved
-            </Button>
-            <Button variant='primary' type='submit' disabled={!canSubmit} loading={isSubmitting}>
-              Save
-            </Button>
-          </Panel.InlineElements>
-        </Panel.SubHeader>
-        <Panel.Divider />
-        <Info>
-          URL presets are user defined aliases to Ontime URLs
-          <br />
-          <br />
-          <b>Preset Name</b> <br />
-          The alias for the URL. This will be the URL you will be calling. eg: <br />
-          <Panel.BlockQuote>
-            Preset name <Panel.Highlight>cam3</Panel.Highlight> called as{' '}
-            <Panel.Highlight>http://localhost:4001/cam3</Panel.Highlight>
-          </Panel.BlockQuote>
-          <br />
-          <b>URL Segment</b> <br />
-          The corresponding alias path and configuration parameters. eg: <br />
-          <Panel.BlockQuote>
-            URL segment <Panel.Highlight>backstage?hidePast=true&stopCycle=true</Panel.Highlight> corresponds to
-            complete URL
-            <Panel.Highlight>http://localhost:4001/backstage?hidePast=true&stopCycle=true</Panel.Highlight>
-          </Panel.BlockQuote>
-          <br />
-          You will need to save the changes before the presets are functional.
-          <br />
-          <ExternalLink href={urlPresetsDocs}>See the docs</ExternalLink>
-        </Info>
-        <Panel.Section>
-          <Panel.Loader isLoading={isLoading} />
-          <Panel.Title>
-            Manage presets
-            <Button onClick={addNew}>
-              New <IoAdd />
-            </Button>
-          </Panel.Title>
-          {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-          {errors?.data && <Panel.Error>{errors.data.message}</Panel.Error>}
-
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th className={style.fit}>Active</th>
-                <th className={style.aliasConstrain}>Preset name</th>
-                <th className={style.fullWidth}>URL segment</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {fields.length === 0 && <Panel.TableEmpty handleClick={addNew} />}
-              {fields.map((preset, index) => {
-                const maybeAliasError = errors.data?.[index]?.alias?.message;
-                const maybeUrlError = errors.data?.[index]?.pathAndParams?.message;
-                // only saved and enabled URLs can be tested
-                const canTest =
-                  preset.alias && preset.enabled && preset.pathAndParams && !maybeAliasError && !maybeUrlError;
-
-                return (
-                  <tr key={preset.id}>
-                    <td className={style.fit}>
-                      <Switch
-                        size='large'
-                        checked={watch(`data.${index}.enabled`)}
-                        onCheckedChange={(value: boolean) =>
-                          setValue(`data.${index}.enabled`, value, { shouldDirty: true })
-                        }
-                        data-testid={`field__enable_${index}`}
-                      />
-                    </td>
-                    <td className={style.aliasConstrain}>
-                      <Input
-                        {...register(`data.${index}.alias`, {
-                          required: { value: true, message: 'Required field' },
-                        })}
-                        fluid
-                        placeholder='URL Preset'
-                        data-testid={`field__alias_${index}`}
-                      />
-                      <Panel.Error>{maybeAliasError}</Panel.Error>
-                    </td>
-                    <td className={style.fullWidth}>
-                      <Input
-                        {...register(`data.${index}.pathAndParams`, {
-                          required: { value: true, message: 'Required field' },
-                        })}
-                        fluid
-                        placeholder='URL (portion after ontime Port)'
-                        data-testid={`field__url_${index}`}
-                      />
-                      <Panel.Error>{maybeUrlError}</Panel.Error>
-                    </td>
-                    <Panel.InlineElements relation='inner' as='td'>
-                      <Tooltip
-                        text='Test preset'
-                        render={<IconButton variant='ghosted-white' />}
-                        data-testid={`field__test_${index}`}
-                        onClick={(event) => handleLinks(preset.alias, event)}
-                        disabled={!canTest}
-                      >
-                        <IoOpenOutline />
-                      </Tooltip>
-                      <IconButton
-                        onClick={() => remove(index)}
-                        variant='ghosted-destructive'
-                        aria-label='Delete entry'
-                        data-testid={`field__delete_${index}`}
-                      >
-                        <IoTrash />
-                      </IconButton>
-                    </Panel.InlineElements>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </Panel.Table>
-        </Panel.Section>
-      </Panel.Card>
-    </Panel.Section>
-  );
-}

apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.module.scss

@@ -0,0 +1,9 @@
+.expand {
+  flex: 1;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { OntimeView, URLPreset } from 'ontime-types';
+
+import { maybeAxiosError, unwrapError } from '../../../../../common/api/utils';
+import Button from '../../../../../common/components/buttons/Button';
+import Input from '../../../../../common/components/input/input/Input';
+import Select, { SelectOption } from '../../../../../common/components/select/Select';
+import { useUpdateUrlPreset } from '../../../../../common/hooks-query/useUrlPresets';
+import { preventEscape } from '../../../../../common/utils/keyEvent';
+import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets';
+import * as Panel from '../../../panel-utils/PanelUtils';
+
+import style from './URLPresetForm.module.scss';
+
+const targetOptions: SelectOption[] = [
+  { value: OntimeView.Cuesheet, label: 'Cuesheet' },
+  { value: OntimeView.Operator, label: 'Operator' },
+  { value: OntimeView.Timer, label: 'Timer' },
+  { value: OntimeView.Backstage, label: 'Backstage' },
+  { value: OntimeView.Timeline, label: 'Timeline' },
+  { value: OntimeView.StudioClock, label: 'Studio Clock' },
+  { value: OntimeView.Countdown, label: 'Countdown' },
+  { value: OntimeView.ProjectInfo, label: 'Project Info' },
+];
+
+const defaultValues: URLPreset = {
+  alias: '',
+  target: OntimeView.Timer,
+  search: '',
+  enabled: true,
+};
+
+interface URLPresetFormProps {
+  urlPreset?: URLPreset;
+  onClose: () => void;
+}
+
+export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps) {
+  const { addPreset, updatePreset, isMutating } = useUpdateUrlPreset();
+
+  const {
+    handleSubmit,
+    register,
+    setFocus,
+    setError,
+    clearErrors,
+    setValue,
+    getValues,
+    watch,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<URLPreset>({
+    defaultValues: urlPreset ?? defaultValues,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+  const urlRef = useRef<HTMLInputElement>(null);
+
+  const setupSubmit = async (data: URLPreset) => {
+    try {
+      if (urlPreset) {
+        await updatePreset(urlPreset.alias, data);
+      } else {
+        await addPreset(data);
+      }
+      onClose();
+    } catch (error) {
+      setError('root', { message: maybeAxiosError(error) });
+    }
+  };
+
+  useEffect(() => {
+    setFocus('alias');
+  }, [setFocus]);
+
+  const generateOptions = () => {
+    clearErrors();
+
+    try {
+      const preset = generateUrlPresetOptions(getValues('alias'), urlRef.current?.value.trim() ?? '');
+      setValue('target', preset.target, { shouldDirty: true, shouldValidate: true });
+      setValue('search', preset.search, { shouldDirty: true, shouldValidate: true });
+    } catch (error) {
+      setError('root', { message: unwrapError(error) });
+      return;
+    }
+  };
+
+  const validateParams = (value: string) => {
+    try {
+      new URLSearchParams(value);
+      return true;
+    } catch (error) {
+      return unwrapError(error) || 'Invalid URL parameters';
+    }
+  };
+
+  return (
+    <Panel.Indent
+      as='form'
+      onSubmit={handleSubmit(setupSubmit)}
+      onKeyDown={(event) => preventEscape(event, onClose)}
+      className={style.column}
+    >
+      <input hidden name='enabled' value='true' />
+
+      <div>1. Enter URL and let Ontime generate the preset options</div>
+      <Panel.InlineElements>
+        <div>
+          <Panel.Description>Alias</Panel.Description>
+          <Input {...register('alias', { required: 'Alias is required' })} />
+        </div>
+        <div className={style.expand}>
+          <Panel.Description>Generate options (paste URL to generate options)</Panel.Description>
+          <Panel.InlineElements>
+            <Input placeholder='Paste URL' fluid ref={urlRef} required />
+            <Button onClick={generateOptions}>Generate</Button>
+          </Panel.InlineElements>
+        </div>
+      </Panel.InlineElements>
+      <div> - or -</div>
+      <div>2. Choose a view and its parameters</div>
+      <div>
+        <Panel.Description>Target</Panel.Description>
+        <Select
+          options={targetOptions}
+          {...register('target', { required: 'Target is required' })}
+          value={watch('target') as OntimeView}
+          onValueChange={(value) => setValue('target', value)}
+        />
+      </div>
+      <div>
+        <Panel.Description>Parameters</Panel.Description>
+        <Input
+          fluid
+          {...register('search', {
+            validate: validateParams,
+          })}
+        />
+        <Panel.Error>{errors.search?.message}</Panel.Error>
+      </div>
+      <div>
+        <Panel.Error>{errors.root?.message}</Panel.Error>
+        <Panel.InlineElements align='end'>
+          <Button onClick={onClose}>Cancel</Button>
+          <Button variant='primary' type='submit' disabled={!isValid || !isDirty} loading={isSubmitting || isMutating}>
+            Save
+          </Button>
+        </Panel.InlineElements>
+      </div>
+    </Panel.Indent>
+  );
+}