fixup! feat: automation UI

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<C extends AllowedInlineTags> = {
+  as?: C;
+  relation?: 'inner' | 'component' | 'section';
+  align?: 'start' | 'end';
+  className?: string;
+};
+
+export function InlineElements<C extends AllowedInlineTags = 'div'>({
   children,
+  as,
   relation = 'component',
   align = 'start',
   className,
-  ...elementProps
-}: PropsWithChildren<
-  HTMLAttributes<HTMLDivElement> & {
-    relation?: 'inner' | 'component' | 'section';
-    align?: 'start' | 'end';
-  }
->) {
-  return (
-    <div {...elementProps} className={cx([style.inlineElements, style[relation], style[align], className])}>
-      {children}
-    </div>
-  );
+}: PropsWithChildren<InlineProps<C>>) {
+  const Element = as ?? 'div';
+  return <Element className={cx([style.inlineElements, style[relation], style[align], className])}>{children}</Element>;
 }

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<string | null>(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) {
           <thead>
             <tr>
               <th style={{ width: '35%' }}>Title</th>
-              <th style={{ width: '25%' }}>Trigger</th>
-              <th style={{ width: '25%' }}>Blueprint</th>
-              <th style={{ width: '15%' }} />
+              <th style={{ width: '20%' }}>Trigger</th>
+              <th style={{ width: '30%' }}>Blueprint</th>
+              <th />
             </tr>
           </thead>
           <tbody>
@@ -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 (
-                <AutomationsListItem
-                  key={automation.id}
-                  blueprints={blueprints}
-                  id={automation.id}
-                  title={automation.title}
-                  trigger={automation.trigger}
-                  blueprintTitle={blueprintTitle}
-                  duplicate={duplicates?.includes(index)}
-                  handleDelete={() => handleDelete(automation.id)}
-                  postSubmit={postSubmit}
-                />
+                <Fragment key={automation.id}>
+                  <AutomationsListItem
+                    blueprints={blueprints}
+                    id={automation.id}
+                    title={automation.title}
+                    trigger={automation.trigger}
+                    blueprintId={automation.blueprintId}
+                    duplicate={duplicates?.includes(index)}
+                    handleDelete={() => handleDelete(automation.id)}
+                    postSubmit={postSubmit}
+                  />
+                  {deleteError && (
+                    <tr>
+                      <td colSpan={5}>
+                        <Panel.Error>{deleteError}</Panel.Error>
+                      </td>
+                    </tr>
+                  )}
+                </Fragment>
               );
             })}
           </tbody>

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 (
     <tr data-warn={duplicate}>
-      <td>
-        <Panel.InlineElements relation='inner'>
-          {duplicate && (
-            <IoWarningOutline
-              color='#FFBC56' // $orange-500
-            />
-          )}
-          {title}
-        </Panel.InlineElements>
-      </td>
+      <Panel.InlineElements as='td' relation='inner'>
+        {duplicate && (
+          <IoWarningOutline
+            color='#FFBC56' // $orange-500
+          />
+        )}
+        {title}
+      </Panel.InlineElements>
       <td>
         <Tag>{trigger}</Tag>
       </td>
       <td>
         <Tag>{blueprintTitle}</Tag>
       </td>
-      <td>
+      <Panel.InlineElements align='end' relation='inner' as='td'>
         <IconButton
           size='sm'
           variant='ontime-ghosted'
@@ -81,7 +80,7 @@ export default function AutomationsListItem(props: AutomationsListItemProps) {
           aria-label='Delete entry'
           onClick={handleDelete}
         />
-      </td>
+      </Panel.InlineElements>
     </tr>
   );
 }

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) {
       <Panel.Table>
         <thead>
           <tr>
-            <th style={{ width: '30%' }}>Title</th>
-            <th style={{ width: '30%' }}>Trigger rule</th>
-            <th>Filters</th>
-            <th>Outputs</th>
+            <th style={{ width: '45%' }}>Title</th>
+            <th style={{ width: '15%' }}>Trigger rule</th>
+            <th style={{ width: '15%' }}>Filters</th>
+            <th style={{ width: '15%' }}>Outputs</th>
             <th />
           </tr>
         </thead>
@@ -82,15 +82,15 @@ export default function BlueprintsList(props: BlueprintsListProps) {
               return null;
             }
             return (
-              <>
-                <tr key={blueprintId}>
+              <Fragment key={blueprintId}>
+                <tr>
                   <td>{blueprints[blueprintId].title}</td>
                   <td>
                     <Tag>{blueprints[blueprintId].filterRule}</Tag>
                   </td>
                   <td>{blueprints[blueprintId].filters.length}</td>
                   <td>{blueprints[blueprintId].outputs.length}</td>
-                  <td>
+                  <Panel.InlineElements align='end' relation='inner' as='td'>
                     <IconButton
                       size='sm'
                       variant='ontime-ghosted'
@@ -107,7 +107,7 @@ export default function BlueprintsList(props: BlueprintsListProps) {
                       aria-label='Delete entry'
                       onClick={() => handleDelete(blueprintId)}
                     />
-                  </td>
+                  </Panel.InlineElements>
                 </tr>
                 {deleteError && (
                   <tr>
@@ -116,7 +116,7 @@ export default function BlueprintsList(props: BlueprintsListProps) {
                     </td>
                   </tr>
                 )}
-              </>
+              </Fragment>
             );
           })}
         </tbody>