fix: cleanup spacing and hook titles in AddRepoModal and AddPlanModal

webui/src/components/HooksFormList.tsx

@@ -54,19 +54,23 @@ export const hooksListTooltipText = <>
  * HooksFormList is a UI component for editing a list of hooks that can apply either at the repo level or at the plan level.
  */
 export const HooksFormList = () => {
+  const form = Form.useFormInstance();
+
   return <Form.List name="hooks">
     {(fields, { add, remove }, { errors }) => (
       <>
         {fields.map((field, index) => {
+          const hookData = form.getFieldValue(["hooks", field.name]) as HookFields;
+
           return <Card key={index} title={<>
-            Hook {index}
+            Hook {index} <small>{findHookTypeName(hookData)}</small>
             <MinusCircleOutlined
               className="dynamic-delete-button"
               onClick={() => remove(field.name)}
               style={{ marginRight: "5px", marginTop: "2px", float: "right" }}
             />
           </>
-          } size="small" >
+          } size="small" style={{ marginBottom: "5px" }}>
             <Form.Item name={[field.name, "conditions"]} >
               <Select
                 mode="multiple"
@@ -102,7 +106,7 @@ export const HooksFormList = () => {
             style={{ width: "60%" }}
             placement="bottom"
           >
-            <Button type="dashed" icon={<PlusOutlined />}>
+            <Button type="dashed" icon={<PlusOutlined />} style={{ width: "100%" }}>
               Add Hook
             </Button>
           </Popover>
@@ -116,6 +120,8 @@ export const HooksFormList = () => {
 const hookTypes: {
   name: string,
   template: HookFields,
+  oneofKey: string,
+  component: ({ field }: { field: FormListFieldData }) => React.ReactNode
 }[] = [
     {
       name: "Command", template: {
@@ -124,6 +130,17 @@ const hookTypes: {
         },
         conditions: [],
       },
+      oneofKey: "actionCommand",
+      component: ({ field }: { field: FormListFieldData }) => {
+        return <>
+          <Tooltip title="Script to execute. Commands will not work in the docker build of Backrest.">
+            Script:
+          </Tooltip>
+          <Form.Item name={[field.name, "actionCommand", "command"]} rules={[requiredField("command is required")]}>
+            <Input.TextArea style={{ width: "100%", fontFamily: "monospace" }} />
+          </Form.Item>
+        </>
+      }
     },
     {
       name: "Discord", template: {
@@ -132,6 +149,18 @@ const hookTypes: {
           template: "{{ .Summary }}",
         },
         conditions: [],
+      },
+      oneofKey: "actionDiscord",
+      component: ({ field }: { field: FormListFieldData }) => {
+        return <>
+          <Form.Item name={[field.name, "actionDiscord", "webhookUrl"]} rules={[requiredField("webhook URL is required"), { type: "url" }]} >
+            <Input addonBefore={<div style={{ width: "8em" }}>Discord Webhook</div>} />
+          </Form.Item >
+          Text Template:
+          <Form.Item name={[field.name, "actionDiscord", "template"]} >
+            <Input.TextArea style={{ width: "100%", fontFamily: "monospace" }} />
+          </Form.Item >
+        </>
       }
     },
     {
@@ -143,6 +172,24 @@ const hookTypes: {
           titleTemplate: "Backrest {{ .EventName .Event }} in plan {{ .Plan.Id }}",
         },
         conditions: [],
+      },
+      oneofKey: "actionGotify",
+      component: ({ field }: { field: FormListFieldData }) => {
+        return <>
+          <Form.Item name={[field.name, "actionGotify", "baseUrl"]} rules={[requiredField("gotify base URL is required"), { type: "url" }]}>
+            <Input addonBefore={<div style={{ width: "8em" }}>Gotify Base URL</div>} />
+          </Form.Item >
+          <Form.Item name={[field.name, "actionGotify", "token"]} rules={[requiredField("gotify token is required")]}>
+            <Input addonBefore={<div style={{ width: "8em" }}>Gotify Token</div>} />
+          </Form.Item>
+          <Form.Item name={[field.name, "actionGotify", "titleTemplate"]} rules={[requiredField("gotify title template is required")]}>
+            <Input addonBefore={<div style={{ width: "8em" }}>Title Template</div>} />
+          </Form.Item>
+          Text Template:
+          <Form.Item name={[field.name, "actionGotify", "template"]}>
+            <Input.TextArea style={{ width: "100%", fontFamily: "monospace" }} />
+          </Form.Item>
+        </>
       }
     },
     {
@@ -152,62 +199,49 @@ const hookTypes: {
           template: "{{ .Summary }}",
         },
         conditions: [],
+      },
+      oneofKey: "actionSlack",
+      component: ({ field }: { field: FormListFieldData }) => {
+        return <>
+          <Form.Item name={[field.name, "actionSlack", "webhookUrl"]} rules={[requiredField("webhook URL is required"), { type: "url" }]} >
+            <Input addonBefore={<div style={{ width: "8em" }}>Slack Webhook</div>} />
+          </Form.Item >
+          Text Template:
+          <Form.Item name={[field.name, "actionSlack", "template"]} >
+            <Input.TextArea style={{ width: "100%", fontFamily: "monospace" }} />
+          </Form.Item >
+        </>
       }
     }
   ];
 
+const findHookTypeName = (field: HookFields): string => {
+  if (!field) {
+    return "Unknown";
+  }
+  for (const hookType of hookTypes) {
+    if (hookType.oneofKey in field) {
+      return hookType.name;
+    }
+  }
+  return "Unknown";
+}
+
 const HookBuilder = ({ field }: { field: FormListFieldData }) => {
   const form = Form.useFormInstance();
   const hookData = form.getFieldValue(["hooks", field.name]) as HookFields;
 
-  if (hookData.actionDiscord) {
-    return <>
-      <Form.Item name={[field.name, "actionDiscord", "webhookUrl"]} rules={[requiredField("webhook URL is required"), { type: "url" }]} >
-        <Input addonBefore={<div style={{ width: "8em" }}>Discord Webhook</div>} />
-      </Form.Item >
-      Text Template:
-      <Form.Item name={[field.name, "actionDiscord", "template"]} >
-        <Input.TextArea style={{ width: "100%", fontFamily: "monospace" }} />
-      </Form.Item >
-    </>
-  } else if (hookData.actionCommand) {
-    return <>
-      <Tooltip title="Script to execute. Commands will not work in the docker build of Backrest.">
-        Script:
-      </Tooltip>
-      <Form.Item name={[field.name, "actionCommand", "command"]} rules={[requiredField("command is required")]}>
-        <Input.TextArea style={{ width: "100%", fontFamily: "monospace" }} />
-      </Form.Item>
-    </>
-  } else if (hookData.actionGotify) {
-    return <>
-      <Form.Item name={[field.name, "actionGotify", "baseUrl"]} rules={[requiredField("gotify base URL is required"), { type: "url" }]}>
-        <Input addonBefore={<div style={{ width: "8em" }}>Gotify Base URL</div>} />
-      </Form.Item >
-      <Form.Item name={[field.name, "actionGotify", "token"]} rules={[requiredField("gotify token is required")]}>
-        <Input addonBefore={<div style={{ width: "8em" }}>Gotify Token</div>} />
-      </Form.Item>
-      <Form.Item name={[field.name, "actionGotify", "titleTemplate"]} rules={[requiredField("gotify title template is required")]}>
-        <Input addonBefore={<div style={{ width: "8em" }}>Title Template</div>} />
-      </Form.Item>
-      Text Template:
-      <Form.Item name={[field.name, "actionGotify", "template"]}>
-        <Input.TextArea style={{ width: "100%", fontFamily: "monospace" }} />
-      </Form.Item>
-    </>
-  } else if (hookData.actionSlack) {
-    return <>
-      <Form.Item name={[field.name, "actionSlack", "webhookUrl"]} rules={[requiredField("webhook URL is required"), { type: "url" }]} >
-        <Input addonBefore={<div style={{ width: "8em" }}>Slack Webhook</div>} />
-      </Form.Item >
-      Text Template:
-      <Form.Item name={[field.name, "actionSlack", "template"]} >
-        <Input.TextArea style={{ width: "100%", fontFamily: "monospace" }} />
-      </Form.Item >
-    </>
-  } else {
-    return <p>Unknown hook</p>
+  if (!hookData) {
+    return <p>Unknown hook type</p>;
   }
+
+  for (const hookType of hookTypes) {
+    if (hookType.oneofKey in hookData) {
+      return hookType.component({ field });
+    }
+  }
+
+  return <p>Unknown hook type</p>;
 }
 
 const requiredField = (message: string, extra?: Rule) => ({ required: true, message: message });

webui/src/views/AddPlanModal.tsx

@@ -416,7 +416,7 @@ export const AddPlanModal = ({
                         ]}
                         noStyle
                       >
-                        <Input placeholder="--flag" style={{ width: "60%" }} />
+                        <Input placeholder="--flag" style={{ width: "90%" }} />
                       </Form.Item>
                       <MinusCircleOutlined
                         className="dynamic-delete-button"
@@ -429,7 +429,7 @@ export const AddPlanModal = ({
                     <Button
                       type="dashed"
                       onClick={() => add()}
-                      style={{ width: "60%" }}
+                      style={{ width: "90%" }}
                       icon={<PlusOutlined />}
                     >
                       Set Flag

webui/src/views/AddRepoModal.tsx

@@ -350,7 +350,7 @@ export const AddRepoModal = ({
                         ]}
                         noStyle
                       >
-                        <Input placeholder="--flag" style={{ width: "60%" }} />
+                        <Input placeholder="--flag" style={{ width: "90%" }} />
                       </Form.Item>
                       <MinusCircleOutlined
                         className="dynamic-delete-button"
@@ -363,7 +363,7 @@ export const AddRepoModal = ({
                     <Button
                       type="dashed"
                       onClick={() => add()}
-                      style={{ width: "60%" }}
+                      style={{ width: "90%" }}
                       icon={<PlusOutlined />}
                     >
                       Set Flag