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 da07623de8..f8b0811690 100644 --- a/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx +++ b/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx @@ -124,21 +124,21 @@ export function Loader({ isLoading }: { isLoading: boolean }) { ); } -export function InlineElements({ +type AllowedInlineTags = 'div' | 'td'; +type InlineProps = { + as?: C; + relation?: 'inner' | 'component' | 'section'; + align?: 'start' | 'end'; + className?: string; +}; + +export function InlineElements({ children, + as, relation = 'component', align = 'start', className, - ...elementProps -}: PropsWithChildren< - HTMLAttributes & { - relation?: 'inner' | 'component' | 'section'; - align?: 'start' | 'end'; - } ->) { - return ( -
- {children} -
- ); +}: PropsWithChildren>) { + const Element = as ?? 'div'; + return {children}; } 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 7483ac5cdf..0c1c391f1f 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,9 +1,10 @@ -import { useMemo, useState } from 'react'; +import { Fragment, useMemo, useState } from 'react'; import { Button } from '@chakra-ui/react'; import { IoAdd } from '@react-icons/all-files/io5/IoAdd'; import { Automation, NormalisedAutomationBlueprint } from 'ontime-types'; import { deleteAutomation } from '../../../../common/api/automation'; +import { maybeAxiosError } from '../../../../common/api/utils'; import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings'; import * as Panel from '../../panel-utils/PanelUtils'; @@ -20,12 +21,13 @@ export default function AutomationsList(props: AutomationsListProps) { const { automations, blueprints } = props; const [showForm, setShowForm] = useState(false); const { refetch } = useAutomationSettings(); + const [deleteError, setDeleteError] = useState(null); const handleDelete = async (id: string) => { try { await deleteAutomation(id); } catch (error) { - /** nothing yet */ + setDeleteError(maybeAxiosError(error)); } finally { refetch(); } @@ -72,9 +74,9 @@ export default function AutomationsList(props: AutomationsListProps) { Title - Trigger - Blueprint - + Trigger + Blueprint + @@ -85,20 +87,26 @@ export default function AutomationsList(props: AutomationsListProps) { /> )} {automations.map((automation, index) => { - // TODO: do we have issues with AutomationListItem not knowing the blueprint id? - const blueprintTitle = blueprints[automation.blueprintId].title; return ( - handleDelete(automation.id)} - postSubmit={postSubmit} - /> + + handleDelete(automation.id)} + postSubmit={postSubmit} + /> + {deleteError && ( + + + {deleteError} + + + )} + ); })} diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationsListItem.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationsListItem.tsx index de8057c6a9..c0e30f2272 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationsListItem.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationsListItem.tsx @@ -15,14 +15,14 @@ interface AutomationsListItemProps { id: string; title: string; trigger: TimerLifeCycle; - blueprintTitle: string; + blueprintId: string; duplicate?: boolean; handleDelete: () => void; postSubmit: () => void; } export default function AutomationsListItem(props: AutomationsListItemProps) { - const { blueprints, id, title, trigger, blueprintTitle, duplicate, handleDelete, postSubmit } = props; + const { blueprints, id, title, trigger, blueprintId, duplicate, handleDelete, postSubmit } = props; const [isEditing, setIsEditing] = useState(false); if (isEditing) { @@ -34,7 +34,7 @@ export default function AutomationsListItem(props: AutomationsListItemProps) { initialId={id} initialTitle={title} initialTrigger={trigger} - initialBlueprint={blueprintTitle} + initialBlueprint={blueprintId} onCancel={() => setIsEditing(false)} postSubmit={() => { setIsEditing(false); @@ -46,25 +46,24 @@ export default function AutomationsListItem(props: AutomationsListItemProps) { ); } + const blueprintTitle = blueprints?.[blueprintId]?.title; return ( - - - {duplicate && ( - - )} - {title} - - + + {duplicate && ( + + )} + {title} + {trigger} {blueprintTitle} - + - + ); } diff --git a/apps/client/src/features/app-settings/panel/automations-panel/BlueprintsList.tsx b/apps/client/src/features/app-settings/panel/automations-panel/BlueprintsList.tsx index 01b589d70e..84588c1be3 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/BlueprintsList.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/BlueprintsList.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { Fragment, useState } from 'react'; import { Button, IconButton } from '@chakra-ui/react'; import { IoAdd } from '@react-icons/all-files/io5/IoAdd'; import { IoPencil } from '@react-icons/all-files/io5/IoPencil'; @@ -66,10 +66,10 @@ export default function BlueprintsList(props: BlueprintsListProps) { - Title - Trigger rule - Filters - Outputs + Title + Trigger rule + Filters + Outputs @@ -82,15 +82,15 @@ export default function BlueprintsList(props: BlueprintsListProps) { return null; } return ( - <> - + + {blueprints[blueprintId].title} {blueprints[blueprintId].filterRule} {blueprints[blueprintId].filters.length} {blueprints[blueprintId].outputs.length} - + handleDelete(blueprintId)} /> - + {deleteError && ( @@ -116,7 +116,7 @@ export default function BlueprintsList(props: BlueprintsListProps) { )} - + ); })}