From 76b4ae8b39c6d46a3fcf279a059dd4b245372a63 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 25 Jul 2026 14:30:18 +0000 Subject: [PATCH] refactor(settings): unify empty states, move entity forms to modals, add sidebar search The settings UI had accumulated three inconsistencies. This addresses all three without renaming any group or breaking `?settings=` deep links. Empty states - Add `Panel.EmptyState` / `Panel.TableEmpty` (title + description + action), promoting the treatment previously local to the spreadsheet PreviewTable. - Add missing empty states to Custom fields, Projects, Rundowns and both Client tables, which previously rendered bare column headers. - Convert the remaining `TableEmpty` call sites off the generic "No data yet". - Rename `.empty` to `.loaderBox` in ProjectPanel, where it meant a loader box rather than an empty state. Entity forms in modals - Add `useEntityModal`, replacing six different open/close mechanisms. - Move the multi-field create/edit forms into `Modal`: automations (wide), triggers, URL presets, custom fields, custom views, new rundown and project merge. Single-field row renames stay inline. - Create and edit now share one surface instead of rendering above the table and in-place respectively, and the list is no longer interactive underneath. - Remove the duplicate project create form; the "New" button now routes to the existing QuickStart modal. Sidebar - Add a search box with per-section keywords, so sections are reachable by the term users have in mind (osc, alias, google sheet, pin...). - Nav items are real buttons in a nav landmark with aria-current; secondary items were previously unreachable by keyboard. - Fix duplicated `manage__sheets` id, which highlighted two entries at once. Also - Re-scroll to a section when its nav item is selected again, and align to the top rather than the centre. - Close button no longer floats over content; drop the 300px padding hack. - Tables scroll with the panel instead of owning a nested scroll area. - Derive divider/table/list padding from a card padding custom property. - Fix an unreachable branch that stopped duplicate custom field labels from being rejected. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01UP4knuna8kLe79NAuNDhUJ --- .../src/common/hooks/useScrollIntoView.tsx | 10 +- .../src/features/app-settings/AppSettings.tsx | 14 +- .../panel-content/PanelContent.module.scss | 19 +- .../panel-content/PanelContent.tsx | 2 +- .../panel-list/PanelList.module.scss | 53 +- .../app-settings/panel-list/PanelList.tsx | 153 +++-- .../panel-utils/PanelUtils.module.scss | 73 ++- .../app-settings/panel-utils/PanelUtils.tsx | 31 +- .../panel-utils/useEntityModal.ts | 29 + .../AutomationForm.module.scss | 10 +- .../automations-panel/AutomationForm.tsx | 592 +++++++++--------- .../automations-panel/AutomationPanel.tsx | 8 +- .../automations-panel/AutomationsList.tsx | 28 +- .../panel/automations-panel/TriggerForm.tsx | 145 +++-- .../panel/automations-panel/TriggersList.tsx | 44 +- .../automations-panel/TriggersListItem.tsx | 43 +- .../panel/feature-panel/FeaturePanel.tsx | 8 +- .../panel/feature-panel/ReportSettings.tsx | 5 +- .../panel/feature-panel/URLPresets.tsx | 32 +- .../feature-panel/composite/URLPresetForm.tsx | 169 ++--- .../panel/manage-panel/CustomFields.tsx | 60 +- .../panel/manage-panel/CustomViewForm.tsx | 120 ++-- .../panel/manage-panel/CustomViews.tsx | 5 +- .../panel/manage-panel/CustomViewsList.tsx | 13 +- .../manage-panel/ManagePanel.module.scss | 6 + .../panel/manage-panel/ManagePanel.tsx | 10 +- .../panel/manage-panel/ManageRundownForm.tsx | 48 +- .../panel/manage-panel/ManageRundowns.tsx | 17 + .../composite/CustomFieldEntry.tsx | 29 +- .../composite/CustomFieldForm.tsx | 133 ++-- .../preview/PreviewTable.module.scss | 27 - .../sheet-import/preview/PreviewTable.tsx | 25 +- .../panel/network-panel/NetworkLogPanel.tsx | 6 +- .../client-control/ClientList.tsx | 12 + .../panel/project-panel/ManageProjects.tsx | 26 +- .../panel/project-panel/ProjectCreateForm.tsx | 84 --- .../panel/project-panel/ProjectList.tsx | 8 +- .../panel/project-panel/ProjectListItem.tsx | 8 +- .../panel/project-panel/ProjectMergeForm.tsx | 127 ++-- .../project-panel/ProjectPanel.module.scss | 2 +- .../panel/project-panel/ProjectPanel.tsx | 4 +- .../panel/settings-panel/SettingsPanel.tsx | 14 +- .../app-settings/useAppSettingsMenu.tsx | 115 +++- .../app-settings/useAppSettingsNavigation.tsx | 19 +- 44 files changed, 1317 insertions(+), 1069 deletions(-) create mode 100644 apps/client/src/features/app-settings/panel-utils/useEntityModal.ts delete mode 100644 apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx diff --git a/apps/client/src/common/hooks/useScrollIntoView.tsx b/apps/client/src/common/hooks/useScrollIntoView.tsx index 1bbcdc26f..907d091cf 100644 --- a/apps/client/src/common/hooks/useScrollIntoView.tsx +++ b/apps/client/src/common/hooks/useScrollIntoView.tsx @@ -1,15 +1,19 @@ import { useEffect, useRef } from 'react'; -export default function useScrollIntoView(name: string, location?: string) { +/** + * Scrolls the returned ref into view whenever the given location becomes active. + * The nonce allows re-triggering the scroll when the user selects the same location again. + */ +export default function useScrollIntoView(name: string, location?: string, nonce?: number) { const ref = useRef(null); useEffect(() => { if (location && ref.current) { if (location === name) { - ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); + ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } - }, [location, name]); + }, [location, name, nonce]); return ref; } diff --git a/apps/client/src/features/app-settings/AppSettings.tsx b/apps/client/src/features/app-settings/AppSettings.tsx index b3da5d21c..b7149188b 100644 --- a/apps/client/src/features/app-settings/AppSettings.tsx +++ b/apps/client/src/features/app-settings/AppSettings.tsx @@ -16,7 +16,7 @@ import useAppSettingsNavigation from './useAppSettingsNavigation'; import style from './AppSettings.module.scss'; export default function AppSettings() { - const { close, panel, location, setLocation } = useAppSettingsNavigation(); + const { close, panel, location, nonce, setLocation } = useAppSettingsNavigation(); useKeyDown(close, 'Escape'); return ( @@ -24,12 +24,12 @@ export default function AppSettings() { - {panel === 'settings' && } - {panel === 'project' && } - {panel === 'manage' && } - {panel === 'automation' && } - {panel === 'sharing' && } - {panel === 'network' && } + {panel === 'settings' && } + {panel === 'project' && } + {panel === 'manage' && } + {panel === 'automation' && } + {panel === 'sharing' && } + {panel === 'network' && } {panel === 'about' && } {panel === 'shutdown' && } diff --git a/apps/client/src/features/app-settings/panel-content/PanelContent.module.scss b/apps/client/src/features/app-settings/panel-content/PanelContent.module.scss index 265409b70..5acc73d24 100644 --- a/apps/client/src/features/app-settings/panel-content/PanelContent.module.scss +++ b/apps/client/src/features/app-settings/panel-content/PanelContent.module.scss @@ -1,10 +1,3 @@ -.corner { - position: fixed; - top: 6rem; - right: 4rem; - z-index: $zindex-floating; -} - .contentWrapper { display: flex; flex-direction: column; @@ -14,9 +7,17 @@ position: relative; } +.corner { + flex: 0 0 auto; + display: flex; + justify-content: flex-end; + padding: 0 1rem 0.5rem; +} + .content { - margin: 1rem; + margin: 0 1rem 1rem; overflow-y: auto; flex-grow: 1; - padding-bottom: 300px; + // room for the last section to scroll to the top of the viewport + padding-bottom: 40vh; } diff --git a/apps/client/src/features/app-settings/panel-content/PanelContent.tsx b/apps/client/src/features/app-settings/panel-content/PanelContent.tsx index 42d028d9c..fe7930124 100644 --- a/apps/client/src/features/app-settings/panel-content/PanelContent.tsx +++ b/apps/client/src/features/app-settings/panel-content/PanelContent.tsx @@ -12,12 +12,12 @@ interface PanelContentProps { export default function PanelContent({ onClose, children }: PropsWithChildren) { return (
-
{children}
+
{children}
); } diff --git a/apps/client/src/features/app-settings/panel-list/PanelList.module.scss b/apps/client/src/features/app-settings/panel-list/PanelList.module.scss index 6326a1576..3bbc1516c 100644 --- a/apps/client/src/features/app-settings/panel-list/PanelList.module.scss +++ b/apps/client/src/features/app-settings/panel-list/PanelList.module.scss @@ -1,3 +1,14 @@ +.nav { + width: min(30vw, 300px); + flex: 0 0 min(30vw, 300px); + min-width: min(30vw, 300px); + display: flex; + flex-direction: column; + gap: 0.75rem; + overflow-y: auto; + padding-right: 1rem; +} + .tabs, ul { list-style: none; @@ -6,27 +17,52 @@ ul { } .tabs { - width: min(30vw, 300px); - flex: 0 0 min(30vw, 300px); - min-width: min(30vw, 300px); display: flex; flex-direction: column; - overflow-y: auto; +} + +.search { + position: relative; + display: flex; + align-items: center; + flex: 0 0 auto; +} + +.searchIcon { + position: absolute; + left: 0.5rem; + color: $gray-400; + pointer-events: none; +} + +.searchInput { + padding-left: 2rem; + padding-right: 2rem; +} + +.searchClear { + position: absolute; + right: 0.25rem; } .primary, .secondary { + width: 100%; + text-align: left; + background: none; + border: none; + font: inherit; + color: inherit; padding: 0.25rem 1rem; - margin-right: 1rem; + cursor: pointer; - &:focus { + &:focus-visible { background-color: $gray-1000; - outline: 0; + outline: 1px solid $blue-500; } &:hover { background-color: $gray-1000; - cursor: pointer; } } @@ -57,6 +93,7 @@ ul { .secondary { margin-left: 1rem; + width: calc(100% - 1rem); color: $secondary-text-gray; border-left: 1px solid $white-10; font-size: $inner-section-text-size; diff --git a/apps/client/src/features/app-settings/panel-list/PanelList.tsx b/apps/client/src/features/app-settings/panel-list/PanelList.tsx index 01dc977c0..0f44b4a27 100644 --- a/apps/client/src/features/app-settings/panel-list/PanelList.tsx +++ b/apps/client/src/features/app-settings/panel-list/PanelList.tsx @@ -1,38 +1,112 @@ -import { Fragment } from 'react'; +import { useHotkeys } from '@mantine/hooks'; +import { Fragment, KeyboardEvent, useMemo, useRef, useState } from 'react'; +import { IoClose, IoSearch } from 'react-icons/io5'; +import IconButton from '../../../common/components/buttons/IconButton'; +import Input from '../../../common/components/input/input/Input'; import Tooltip from '../../../common/components/tooltip/Tooltip'; -import { isKeyEnter } from '../../../common/utils/keyEvent'; import { cx } from '../../../common/utils/styleUtils'; -import { SettingsOption, SettingsOptionId, useAppSettingsMenu } from '../useAppSettingsMenu'; +import * as Panel from '../panel-utils/PanelUtils'; +import { filterSettingsOptions, SettingsOption, SettingsOptionId, useAppSettingsMenu } from '../useAppSettingsMenu'; import useAppSettingsNavigation from '../useAppSettingsNavigation'; import style from './PanelList.module.scss'; export interface PanelBaseProps { location?: string; + /** bumped on every navigation request so panels can re-scroll to a section */ + nonce?: number; } interface PanelListProps extends PanelBaseProps { selectedPanel: string; } +/** returns the destination a search result should navigate to */ +function getFirstResultId(results: SettingsOption[]): SettingsOptionId | null { + const firstGroup = results[0]; + if (!firstGroup) { + return null; + } + return (firstGroup.secondary?.[0]?.id ?? firstGroup.id) as SettingsOptionId; +} + export default function PanelList({ selectedPanel, location }: PanelListProps) { const { options } = useAppSettingsMenu(); + const { setLocation } = useAppSettingsNavigation(); + const [query, setQuery] = useState(''); + const searchRef = useRef(null); + + useHotkeys([['mod + f', () => searchRef.current?.focus()]]); + + const results = useMemo(() => filterSettingsOptions(options, query), [options, query]); + const isSearching = query.trim().length > 0; + + const handleSearchKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape' && isSearching) { + // do not let the settings panel close while the user is clearing a search + event.stopPropagation(); + setQuery(''); + return; + } + + if (event.key === 'Enter') { + const target = getFirstResultId(results); + if (target) { + setLocation(target); + setQuery(''); + } + } + }; return ( -
    - {options.map((panel) => { - const isSelected = selectedPanel === panel.id; - if (panel.highlight) { - return ( - }> - - - ); - } - return ; - })} -
+ ); } @@ -48,36 +122,29 @@ function PanelListItem({ panel, isSelected, location }: PanelListItemProps) { return ( -
  • setLocation(panel.id as SettingsOptionId)} - onKeyDown={(event) => { - if (isKeyEnter(event)) { - setLocation(panel.id as SettingsOptionId); - } - }} - className={classes} - tabIndex={0} - role='button' - > - {panel.label} +
  • +
    • - {panel.secondary?.map((secondary, index) => { + {panel.secondary?.map((secondary) => { const id = secondary.id.split('__')[1]; - const secondaryClasses = cx([style.secondary, isSelected && location === id ? style.active : null]); + const isActive = isSelected && location === id; return ( -
  • setLocation(secondary.id as SettingsOptionId)} - onKeyDown={(event) => { - if (isKeyEnter(event)) { - setLocation(secondary.id as SettingsOptionId); - } - }} - className={secondaryClasses} - role='button' - > - {secondary.label} +
  • +
    • ); })} diff --git a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss b/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss index a1e036598..6fdf78249 100644 --- a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss +++ b/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss @@ -1,24 +1,26 @@ $inner-padding: 1rem; +$card-padding: 2rem; .header { - font-size: 2rem; + font-size: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid $white-10; font-weight: 600; } .subheader { - font-size: 1.5rem; + font-size: 1.125rem; padding-bottom: 0.5rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; + gap: 1rem; } .title { - font-size: 1.375rem; - padding: 0 2rem; + font-size: 1rem; + padding: 0 var(--panel-card-padding, #{$card-padding}); font-weight: 600; display: flex; align-items: center; @@ -39,6 +41,8 @@ $inner-padding: 1rem; position: relative; margin-top: 2rem; max-width: 1024px; + // keeps a section clear of the sticky close button when scrolled into view + scroll-margin-top: 1rem; } .indent { @@ -51,8 +55,10 @@ $inner-padding: 1rem; } .card { + --panel-card-padding: #{$card-padding}; + position: relative; - padding: 2rem; + padding: var(--panel-card-padding); background-color: $white-3; border: 1px solid $gray-1100; border-radius: 3px; @@ -76,10 +82,10 @@ $inner-padding: 1rem; color: $error-red; } +// tables scroll with the panel rather than owning a nested scroll area, +// which keeps the sticky table head anchored to the panel viewport .pad { - padding: 0 2rem; - max-height: 550px; - overflow-y: scroll; + padding: 0 var(--panel-card-padding, #{$card-padding}); } .table { @@ -120,7 +126,7 @@ $inner-padding: 1rem; } .listGroup { - padding: 0 2rem; + padding: 0 var(--panel-card-padding, #{$card-padding}); > li:not(:last-child) { border-bottom: 1px solid $white-10; @@ -163,7 +169,7 @@ $inner-padding: 1rem; .divider { border: none; border-top: 1px solid $white-10; - margin: 1rem -2rem; + margin: 1rem calc(var(--panel-card-padding, #{$card-padding}) * -1); } .overlay { @@ -188,19 +194,35 @@ $inner-padding: 1rem; animation: animloader 1s ease-in infinite; } -.empty { - background-color: $black-10; +.emptyState { + padding: 3rem 1.5rem; text-align: center; - color: $muted-gray; +} - td { - padding-block: 5rem; - } +.emptyMessage { + width: min(30rem, 100%); + margin-inline: auto; +} - button { - margin-top: 1rem; - margin-inline: auto; - } +.emptyTitle { + margin-bottom: 0.25rem; + color: rgba($gray-200, 0.72); + font-size: calc(1rem + 2px); + font-weight: 400; +} + +.emptyBody { + color: rgba($gray-200, 0.55); + font-size: calc(1rem - 3px); + line-height: 1.5; +} + +.emptyAction { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + margin-top: 1rem; } .inlineElements { @@ -239,14 +261,3 @@ $inner-padding: 1rem; opacity: 0; } } - -@keyframes animloader { - 0% { - transform: scale(0); - opacity: 0.6; - } - 100% { - transform: scale(1); - opacity: 0; - } -} diff --git a/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx b/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx index ebc996df1..0287fbcb9 100644 --- a/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx +++ b/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx @@ -1,7 +1,5 @@ import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; -import { IoAdd } from 'react-icons/io5'; -import Button from '../../../common/components/buttons/Button'; import { cx } from '../../../common/utils/styleUtils'; import style from './PanelUtils.module.scss'; @@ -62,16 +60,29 @@ export function Table({ className, children }: { className?: string; children: R ); } -export function TableEmpty({ label, handleClick }: { label?: string; handleClick?: () => void }) { +export interface EmptyStateProps { + title: string; + description?: ReactNode; + action?: ReactNode; +} + +export function EmptyState({ title, description, action }: EmptyStateProps) { return ( - +
    +
    +
    {title}
    + {description &&
    {description}
    } + {action &&
    {action}
    } +
    +
    + ); +} + +export function TableEmpty(props: EmptyStateProps) { + return ( + -
    {label ?? 'No data yet'}
    - {handleClick && ( - - )} + ); diff --git a/apps/client/src/features/app-settings/panel-utils/useEntityModal.ts b/apps/client/src/features/app-settings/panel-utils/useEntityModal.ts new file mode 100644 index 000000000..18ca12792 --- /dev/null +++ b/apps/client/src/features/app-settings/panel-utils/useEntityModal.ts @@ -0,0 +1,29 @@ +import { useCallback, useState } from 'react'; + +interface EntityModalState { + isOpen: boolean; + entity: T | null; +} + +/** + * Drives a create / edit modal for a list of entities. + * Opening with an entity means edit, opening without means create. + * + * Consumers mount the modal only while `isOpen` is true, which keeps the + * form state of the underlying react-hook-form fresh on every open. + */ +export function useEntityModal() { + const [state, setState] = useState>({ isOpen: false, entity: null }); + + const openCreate = useCallback(() => setState({ isOpen: true, entity: null }), []); + const openEdit = useCallback((entity: T) => setState({ isOpen: true, entity }), []); + const close = useCallback(() => setState({ isOpen: false, entity: null }), []); + + return { + isOpen: state.isOpen, + entity: state.entity, + openCreate, + openEdit, + close, + }; +} diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss index d1f772623..fd9ea49cb 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss +++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss @@ -1,6 +1,14 @@ .outerColumn { + display: flex; + flex-direction: column; gap: 2rem; - margin-bottom: 2rem; + font-size: calc(1rem - 1px); + color: $ui-white; + + // the wide modal hands us a fixed height area, we own the scroll + height: 100%; + overflow-y: auto; + padding-block: 0.5rem; h3 { font-size: 1rem; diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx index 545a0e94d..03cf90b07 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx @@ -19,12 +19,12 @@ 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 Modal from '../../../../common/components/modal/Modal'; import RadioGroup from '../../../../common/components/radio-group/RadioGroup'; import Select from '../../../../common/components/select/Select'; import Tag from '../../../../common/components/tag/Tag'; import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings'; import useCustomFields from '../../../../common/hooks-query/useCustomFields'; -import { preventEscape } from '../../../../common/utils/keyEvent'; import { startsWithHttp } from '../../../../common/utils/regex'; import * as Panel from '../../panel-utils/PanelUtils'; import { isAutomation, makeFieldList } from './automationUtils'; @@ -34,6 +34,7 @@ import TemplateInput from './template-input/TemplateInput'; import style from './AutomationForm.module.scss'; const integrationsDocsUrl = 'https://docs.getontime.no/api/automation/#using-variables-in-automation'; +const formId = 'automation-form'; interface AutomationFormProps { automation: Automation | AutomationDTO; @@ -185,291 +186,322 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr const canSubmit = !isSubmitting && isDirty && isValid; return ( - preventEscape(event, onClose)} - > - {isEdit ? 'Edit automation' : 'Create automation'} -
    -

    Automation options

    -
    - - {errors.title?.message} -
    -
    - -
    -

    Filters (optional)

    -
    - - {fieldFilters.map((field, index) => { - const key = `filters.${index}.field.${field.id}`; - return ( -
    - - -
    -   -
    - removeFilter(index)}> - - -
    -
    -
    - ); - })} -
    - + + {errors?.root && {errors.root.message}} + + + + } + bodyElements={ +
    +
    +

    Automation options

    +
    + + {errors.title?.message} +
    -
    -
    -
    -

    Outputs

    - - Automation outputs can be used to send data from Ontime to external software
    - or to change properties of Ontime itself.

    - Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '} - read the docs -     - - {fieldOutputs.map((output, index) => { - if (isOSCOutput(output)) { - const rowErrors = errors.outputs?.[index] as - | { - targetIP?: { message?: string }; - targetPort?: { message?: string }; - address?: { message?: string }; - args?: { message?: string }; - } - | undefined; - - return ( -
    - OSC -
    - - - - -
    -   - - - removeOutput(index)}> - - - +
    +

    Filters (optional)

    +
    + + {fieldFilters.map((field, index) => { + const key = `filters.${index}.field.${field.id}`; + return ( +
    + + +
    +   +
    + removeFilter(index)} + > + + +
    +
    -
    + ); + })} +
    +
    - ); - } - if (isHTTPOutput(output)) { - const rowErrors = errors.outputs?.[index] as - | { - url?: { message?: string }; - } - | undefined; - return ( -
    - HTTP -
    - -
    -   - - - removeOutput(index)}> - - - +
    +
    + +
    +

    Outputs

    + + Automation outputs can be used to send data from Ontime to external software
    + or to change properties of Ontime itself.

    + Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '} + read the docs +     + + {fieldOutputs.map((output, index) => { + if (isOSCOutput(output)) { + const rowErrors = errors.outputs?.[index] as + | { + targetIP?: { message?: string }; + targetPort?: { message?: string }; + address?: { message?: string }; + args?: { message?: string }; + } + | undefined; + + return ( +
    + OSC +
    + + + + +
    +   + + + removeOutput(index)} + > + + + +
    +
    -
    -
    - ); - } + ); + } + if (isHTTPOutput(output)) { + const rowErrors = errors.outputs?.[index] as + | { + url?: { message?: string }; + } + | undefined; + return ( +
    + HTTP +
    + +
    +   + + + removeOutput(index)} + > + + + +
    +
    +
    + ); + } - if (isOntimeAction(output)) { - const rowErrors = errors.outputs?.[index] as - | { - action?: { message?: string }; - time?: { message?: string }; - text?: { message?: string }; - visible?: { message?: string }; - secondarySource?: { message?: string }; - } - | undefined; - return ( -
    - Ontime action - -   - - - removeOutput(index)}> - - - - -
    - ); - } + if (isOntimeAction(output)) { + const rowErrors = errors.outputs?.[index] as + | { + action?: { message?: string }; + time?: { message?: string }; + text?: { message?: string }; + visible?: { message?: string }; + secondarySource?: { message?: string }; + } + | undefined; + return ( +
    + Ontime action + +   + + + removeOutput(index)} + > + + + + +
    + ); + } - // there should be no other output types - return null; - })} - - - - - -
    - - - {errors?.root && {errors.root.message}} - - - - + // there should be no other output types + return null; + })} + + + + + +
    + + } + /> ); } diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationPanel.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationPanel.tsx index be25f9fb3..b1327f214 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationPanel.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationPanel.tsx @@ -6,11 +6,11 @@ import AutomationSettingsForm from './AutomationSettingsForm'; import AutomationsList from './AutomationsList'; import TriggersList from './TriggersList'; -export default function AutomationPanel({ location }: PanelBaseProps) { +export default function AutomationPanel({ location, nonce }: PanelBaseProps) { const { data, status } = useAutomationSettings(); - const settingsRef = useScrollIntoView('settings', location); - const triggersRef = useScrollIntoView('triggers', location); - const automationsRef = useScrollIntoView('automations', location); + const settingsRef = useScrollIntoView('settings', location, nonce); + const triggersRef = useScrollIntoView('triggers', location, nonce); + const automationsRef = useScrollIntoView('automations', location, nonce); const isLoading = status === 'pending'; const automationState = isLoading ? undefined : data.enabledAutomations; diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx index 3da03d80a..a09c6402b 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx @@ -1,4 +1,4 @@ -import { AutomationDTO, NormalisedAutomation } from 'ontime-types'; +import { Automation, AutomationDTO, NormalisedAutomation } from 'ontime-types'; import { Fragment, useState } from 'react'; import { IoAdd, IoPencil, IoTrash } from 'react-icons/io5'; @@ -10,6 +10,7 @@ import Info from '../../../../common/components/info/Info'; import Tag from '../../../../common/components/tag/Tag'; import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings'; import * as Panel from '../../panel-utils/PanelUtils'; +import { useEntityModal } from '../../panel-utils/useEntityModal'; import AutomationForm from './AutomationForm'; const automationPlaceholder: AutomationDTO = { @@ -27,7 +28,7 @@ interface AutomationsListProps { export default function AutomationsList(props: AutomationsListProps) { const { automations, enabledAutomations } = props; const { refetch } = useAutomationSettings(); - const [automationFormData, setAutomationFormData] = useState(null); + const automationModal = useEntityModal(); const [deleteError, setDeleteError] = useState(null); const handleDelete = async (id: string) => { @@ -45,13 +46,12 @@ export default function AutomationsList(props: AutomationsListProps) { return ( + {automationModal.isOpen && ( + + )} Manage automations - @@ -65,10 +65,6 @@ export default function AutomationsList(props: AutomationsListProps) { )} - {automationFormData !== null && ( - setAutomationFormData(null)} /> - )} - @@ -82,7 +78,13 @@ export default function AutomationsList(props: AutomationsListProps) { {arrayAutomations.length === 0 && ( setAutomationFormData(automationPlaceholder) : undefined} + title='No automations yet' + description='An automation sends OSC or HTTP messages, or runs an Ontime action, whenever a trigger fires.' + action={ + + } /> )} {arrayAutomations.map((automationId) => { @@ -102,7 +104,7 @@ export default function AutomationsList(props: AutomationsListProps) { setAutomationFormData(automations[automationId])} + onClick={() => automationModal.openEdit(automations[automationId])} > diff --git a/apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx index 49cee5a64..a0ee9b906 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx @@ -1,4 +1,4 @@ -import { NormalisedAutomation, TimerLifeCycle, TriggerDTO } from 'ontime-types'; +import { NormalisedAutomation, TimerLifeCycle, Trigger, TriggerDTO } from 'ontime-types'; import { useEffect } from 'react'; import { useForm } from 'react-hook-form'; @@ -6,30 +6,23 @@ import { addTrigger, editTrigger } from '../../../../common/api/automation'; import { maybeAxiosError } from '../../../../common/api/utils'; import Button from '../../../../common/components/buttons/Button'; import Input from '../../../../common/components/input/input/Input'; +import Modal from '../../../../common/components/modal/Modal'; import Select from '../../../../common/components/select/Select'; -import { preventEscape } from '../../../../common/utils/keyEvent'; import * as Panel from '../../panel-utils/PanelUtils'; import { cycles } from './automationUtils'; +const formId = 'trigger-form'; + interface TriggerFormProps { automations: NormalisedAutomation; - initialId?: string; - initialTitle?: string; - initialAutomationId?: string; - initialTrigger?: TimerLifeCycle; - onCancel: () => void; + trigger: Trigger | null; + onClose: () => void; postSubmit: () => void; } -export default function TriggerForm({ - automations, - initialId, - initialTitle, - initialAutomationId, - initialTrigger, - onCancel, - postSubmit, -}: TriggerFormProps) { +export default function TriggerForm({ automations, trigger, onClose, postSubmit }: TriggerFormProps) { + const isEdit = trigger !== null; + const { handleSubmit, register, @@ -40,9 +33,9 @@ export default function TriggerForm({ formState: { errors, isSubmitting, isValid, isDirty }, } = useForm({ defaultValues: { - title: initialTitle, - trigger: initialTrigger ?? (cycles[0].value as TimerLifeCycle | undefined), - automationId: initialAutomationId ?? automations?.[Object.keys(automations)[0]]?.id, + title: trigger?.title, + trigger: trigger?.trigger ?? (cycles[0].value as TimerLifeCycle | undefined), + automationId: trigger?.automationId ?? automations?.[Object.keys(automations)[0]]?.id, }, resetOptions: { keepDirtyValues: true, @@ -55,10 +48,10 @@ export default function TriggerForm({ }, [setFocus]); const onSubmit = async (values: TriggerDTO) => { - // if we were passed an ID we are editing a Trigger - if (initialId) { + // if we were passed a trigger we are editing it + if (trigger) { try { - await editTrigger(initialId, { id: initialId, ...values }); + await editTrigger(trigger.id, { id: trigger.id, ...values }); postSubmit(); } catch (error) { setError('root', { message: `Failed to save changes to trigger ${maybeAxiosError(error)}` }); @@ -66,7 +59,7 @@ export default function TriggerForm({ return; } - // otherwise we are creating a new automation + // otherwise we are creating a new trigger try { await addTrigger(values); postSubmit(); @@ -85,56 +78,60 @@ export default function TriggerForm({ const canSubmit = isDirty && isValid; return ( - preventEscape(event, onCancel)} - > - {initialId ? 'Edit trigger' : 'Create trigger'} - - - - - - - + + + + + + + } + footerElements={ + <> + {errors.root && {errors.root.message}} + + + + } + /> ); } diff --git a/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.tsx b/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.tsx index 2978cdbd9..bda7ba198 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.tsx @@ -8,8 +8,9 @@ import Button from '../../../../common/components/buttons/Button'; import Info from '../../../../common/components/info/Info'; import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings'; import * as Panel from '../../panel-utils/PanelUtils'; +import { useEntityModal } from '../../panel-utils/useEntityModal'; import { checkDuplicates } from './automationUtils'; -import AutomationForm from './TriggerForm'; +import TriggerForm from './TriggerForm'; import TriggersListItem from './TriggersListItem'; interface TriggersListProps { @@ -20,7 +21,7 @@ interface TriggersListProps { export default function TriggersList(props: TriggersListProps) { const { triggers, automations, enabledAutomations } = props; - const [showForm, setShowForm] = useState(false); + const triggerModal = useEntityModal(); const { refetch } = useAutomationSettings(); const [deleteError, setDeleteError] = useState(null); @@ -35,7 +36,7 @@ export default function TriggersList(props: TriggersListProps) { }; const postSubmit = () => { - setShowForm(false); + triggerModal.close(); refetch(); }; @@ -46,9 +47,17 @@ export default function TriggersList(props: TriggersListProps) { return ( + {triggerModal.isOpen && ( + + )} Manage triggers - @@ -64,9 +73,6 @@ export default function TriggersList(props: TriggersListProps) { You have created multiple links between the same trigger and automation which can performance issues. )} - {showForm && ( - setShowForm(false)} postSubmit={postSubmit} /> - )} @@ -77,10 +83,21 @@ export default function TriggersList(props: TriggersListProps) { - {!showForm && triggers.length === 0 && ( + {triggers.length === 0 && ( setShowForm(true) : undefined} + title='No triggers yet' + description={ + canAdd + ? 'Triggers run an automation at a given point of the timer lifecycle, like when an event starts or finishes.' + : 'Create an automation first, then add a trigger to decide when it should run.' + } + action={ + canAdd && ( + + ) + } /> )} {triggers.map((trigger, index) => { @@ -88,13 +105,10 @@ export default function TriggersList(props: TriggersListProps) { triggerModal.openEdit(trigger)} handleDelete={() => handleDelete(trigger.id)} - postSubmit={postSubmit} /> {deleteError && ( diff --git a/apps/client/src/features/app-settings/panel/automations-panel/TriggersListItem.tsx b/apps/client/src/features/app-settings/panel/automations-panel/TriggersListItem.tsx index 64f01f44d..aecda7a0c 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/TriggersListItem.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/TriggersListItem.tsx @@ -1,48 +1,21 @@ -import { NormalisedAutomation, TimerLifeCycle } from 'ontime-types'; -import { useState } from 'react'; +import { NormalisedAutomation, Trigger } from 'ontime-types'; import { IoPencil, IoTrash, IoWarningOutline } from 'react-icons/io5'; import IconButton from '../../../../common/components/buttons/IconButton'; import Tag from '../../../../common/components/tag/Tag'; import * as Panel from '../../panel-utils/PanelUtils'; import { cycles } from './automationUtils'; -import AutomationForm from './TriggerForm'; interface TriggersListItemProps { automations: NormalisedAutomation; - id: string; - title: string; - trigger: TimerLifeCycle; - automationId: string; + trigger: Trigger; duplicate?: boolean; + handleEdit: () => void; handleDelete: () => void; - postSubmit: () => void; } export default function TriggersListItem(props: TriggersListItemProps) { - const { automations, id, title, trigger, automationId, duplicate, handleDelete, postSubmit } = props; - const [isEditing, setIsEditing] = useState(false); - - if (isEditing) { - return ( - - - setIsEditing(false)} - postSubmit={() => { - setIsEditing(false); - postSubmit(); - }} - /> - - - ); - } + const { automations, trigger, duplicate, handleEdit, handleDelete } = props; return ( @@ -52,16 +25,16 @@ export default function TriggersListItem(props: TriggersListItemProps) { color='#FFBC56' // $orange-500 /> )} - {title} + {trigger.title} - {cycles.find((cycle) => cycle.value === trigger)?.label} + {cycles.find((cycle) => cycle.value === trigger.trigger)?.label} - {automations?.[automationId]?.title} + {automations?.[trigger.automationId]?.title} - setIsEditing(true)}> + diff --git a/apps/client/src/features/app-settings/panel/feature-panel/FeaturePanel.tsx b/apps/client/src/features/app-settings/panel/feature-panel/FeaturePanel.tsx index f88024a3e..bfd2765e7 100644 --- a/apps/client/src/features/app-settings/panel/feature-panel/FeaturePanel.tsx +++ b/apps/client/src/features/app-settings/panel/feature-panel/FeaturePanel.tsx @@ -7,10 +7,10 @@ import InfoNif from '../network-panel/NetworkInterfaces'; import ReportSettings from './ReportSettings'; import URLPresets from './URLPresets'; -export default function FeaturePanel({ location }: PanelBaseProps) { - const presetsRef = useScrollIntoView('presets', location); - const linkRef = useScrollIntoView('link', location); - const reportRef = useScrollIntoView('report', location); +export default function FeaturePanel({ location, nonce }: PanelBaseProps) { + const presetsRef = useScrollIntoView('presets', location, nonce); + const linkRef = useScrollIntoView('link', location, nonce); + const reportRef = useScrollIntoView('report', location, nonce); return ( <> diff --git a/apps/client/src/features/app-settings/panel/feature-panel/ReportSettings.tsx b/apps/client/src/features/app-settings/panel/feature-panel/ReportSettings.tsx index 7dafb2a65..924bda3d4 100644 --- a/apps/client/src/features/app-settings/panel/feature-panel/ReportSettings.tsx +++ b/apps/client/src/features/app-settings/panel/feature-panel/ReportSettings.tsx @@ -66,7 +66,10 @@ export default function ReportSettings() { {combinedReport.length === 0 && ( - + )} {combinedReport.map((entry) => { diff --git a/apps/client/src/features/app-settings/panel/feature-panel/URLPresets.tsx b/apps/client/src/features/app-settings/panel/feature-panel/URLPresets.tsx index 8cbb5a5a2..e2a3bc8e2 100644 --- a/apps/client/src/features/app-settings/panel/feature-panel/URLPresets.tsx +++ b/apps/client/src/features/app-settings/panel/feature-panel/URLPresets.tsx @@ -12,25 +12,17 @@ import Tag from '../../../../common/components/tag/Tag'; import useUrlPresets, { useUpdateUrlPreset } from '../../../../common/hooks-query/useUrlPresets'; import { handleLinks } from '../../../../common/utils/linkUtils'; import * as Panel from '../../panel-utils/PanelUtils'; +import { useEntityModal } from '../../panel-utils/useEntityModal'; 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({ isOpen: false, preset: undefined }); + const presetModal = useEntityModal(); const [actionError, setActionError] = useState(null); const { data, status } = useUrlPresets(); const { updatePreset, deletePreset, isMutating } = useUpdateUrlPreset(); - const openNewForm = () => setFormState({ isOpen: true }); - const openEditForm = (preset: URLPreset) => setFormState({ isOpen: true, preset }); - const closeForm = () => setFormState({ isOpen: false, preset: undefined }); - const persistPreset = async (preset: URLPreset) => { setActionError(null); try { @@ -43,9 +35,12 @@ export default function URLPresets() { return ( + {presetModal.isOpen && ( + + )} URL presets - @@ -63,7 +58,6 @@ export default function URLPresets() { - {formState.isOpen && } {actionError && {actionError}} @@ -76,7 +70,17 @@ export default function URLPresets() { - {data.length === 0 && } + {data.length === 0 && ( + + Create preset + + } + /> + )} {data.map((preset, index) => { const isCuesheet = preset.target === OntimeView.Cuesheet; return ( @@ -109,7 +113,7 @@ export default function URLPresets() { openEditForm(preset)} + onClick={() => presetModal.openEdit(preset)} variant='ghosted-white' aria-label='Edit entry' data-testid={`field__edit_${index}`} diff --git a/apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx b/apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx index 2d87612fc..3d57a3d09 100644 --- a/apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx +++ b/apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx @@ -6,9 +6,9 @@ import { maybeAxiosError, unwrapError } from '../../../../../common/api/utils'; import Button from '../../../../../common/components/buttons/Button'; import Input from '../../../../../common/components/input/input/Input'; import Textarea from '../../../../../common/components/input/textarea/Textarea'; +import Modal from '../../../../../common/components/modal/Modal'; import Select, { SelectOption } from '../../../../../common/components/select/Select'; import { useUpdateUrlPreset } from '../../../../../common/hooks-query/useUrlPresets'; -import { preventEscape } from '../../../../../common/utils/keyEvent'; import { isUrlSafe } from '../../../../../common/utils/regex'; import { enDash } from '../../../../../common/utils/styleUtils'; import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets'; @@ -28,6 +28,8 @@ const targetOptions: SelectOption[] = [ { value: OntimeView.ProjectInfo, label: 'Project Info' }, ]; +const formId = 'url-preset-form'; + const defaultValues: URLPreset = { alias: '', target: OntimeView.Timer, @@ -134,95 +136,100 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps }; return ( - preventEscape(event, onClose)} - className={style.column} - > - - -
    1. Enter URL and let Ontime generate the preset options
    - -
    - Alias - -
    -
    - Generate options (paste URL to generate options) - - - - -
    -     - {errors.alias?.message && {errors.alias.message}} - {!isEditingCuesheet && ( + -
    - {enDash} or {enDash} -
    -
    2. Choose a view and its parameters
    -
    - Target -