Skip to content

Commit

Permalink
fix: cleanup spacing and hook titles in AddRepoModal and AddPlanModal
Browse files Browse the repository at this point in the history
  • Loading branch information
@garethgeorge
garethgeorge committed Mar 30, 2024
1 parent 6f330ac commit c32874c
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 54 deletions.
134 changes: 84 additions & 50 deletions webui/src/components/HooksFormList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Expand All @@ -116,6 +120,8 @@ export const HooksFormList = () => {
const hookTypes: {
name: string,
template: HookFields,
oneofKey: string,
component: ({ field }: { field: FormListFieldData }) => React.ReactNode
}[] = [
{
name: "Command", template: {
Expand All @@ -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: {
Expand All @@ -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 >
</>
}
},
{
Expand All @@ -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>
</>
}
},
{
Expand All @@ -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 });
4 changes: 2 additions & 2 deletions webui/src/views/AddPlanModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -429,7 +429,7 @@ export const AddPlanModal = ({
<Button
type="dashed"
onClick={() => add()}
style={{ width: "60%" }}
style={{ width: "90%" }}
icon={<PlusOutlined />}
>
Set Flag
Expand Down
4 changes: 2 additions & 2 deletions webui/src/views/AddRepoModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -363,7 +363,7 @@ export const AddRepoModal = ({
<Button
type="dashed"
onClick={() => add()}
style={{ width: "60%" }}
style={{ width: "90%" }}
icon={<PlusOutlined />}
>
Set Flag
Expand Down

0 comments on commit c32874c

Please sign in to comment.