feat(ui): add discord support for webhook notifications

src/components/notifications/NotificationFormatSelector.jsx

@@ -3,16 +3,19 @@ import Form from "react-bootstrap/Form";
 import Col from "react-bootstrap/Col";
 import { stateProperty } from "../../forms";
 
-export function NotificationFormatSelector(component, name) {
+export function NotificationFormatSelector(component, name, { lockPlainText = false } = {}) {
   return (
     <Form.Group as={Col}>
       <Form.Label className="required">Notification Format</Form.Label>
       <Form.Control
         as="select"
         size="sm"
         name={name}
+        data-testid="notification-format"
         onChange={(e) => component.handleChange(e)}
-        value={stateProperty(component, name)}
+        value={lockPlainText ? "txt" : stateProperty(component, name)}
+        className={lockPlainText ? "opacity-50" : ""}
+        disabled={lockPlainText}
       >
         <option value="txt">Plain Text Format</option>
         <option value="html">HTML Format</option>

src/components/notifications/WebHookNotificationMethod.jsx

@@ -14,6 +14,7 @@ export class WebHookNotificationMethod extends Component {
     this.state = {
       format: "txt",
       method: "POST",
+      discord: false,
       ...props.initial,
     };
     this.handleChange = handleChange.bind(this);
@@ -32,27 +33,45 @@ export class WebHookNotificationMethod extends Component {
       <>
         <Row>
           {RequiredField(this, "URL Endpoint", "endpoint", { autoFocus: true })}
-          <Form.Group as={Col}>
-            <Form.Label className="required">HTTP Method</Form.Label>
-            <Form.Control
-              as="select"
-              size="sm"
-              name="method"
-              onChange={(e) => this.handleChange(e)}
-              value={stateProperty(this, "method")}
-            >
-              <option value="POST">POST</option>
-              <option value="PUT">PUT</option>
-            </Form.Control>
-          </Form.Group>
-          {NotificationFormatSelector(this, "format")}
+          <Col md="auto">
+            <Form.Label className="required">Discord</Form.Label>
+            <Form.Check 
+              type="checkbox" 
+              checked={this.state.discord}
+              data-testid="discord"
+              onChange={(e) => {
+                this.setState({ discord: e.target.checked });
+              }}
+              />
+            </Col>
+          </Row>
+
+          <Row>
+            <Form.Group as={Col}>
+              <Form.Label className="required">HTTP Method</Form.Label>
+              <Form.Control
+                as="select"
+                size="sm"
+                name="method"
+                data-testid="http-method"
+                onChange={(e) => this.handleChange(e)}
+                value={this.state.discord ? "POST" : stateProperty(this, "method")}
+                disabled={this.state.discord}
+                className={this.state.discord ? "opacity-50" : ""}
+              >
+                <option value="POST">POST</option>
+                <option value="PUT">PUT</option>
+              </Form.Control>
+            </Form.Group>
+            {NotificationFormatSelector(this, "format", { lockPlainText: this.state.discord })}
         </Row>
+
         <Row>
           {OptionalField(
             this,
             "Additional Headers",
             "headers",
-            { as: "textarea", rows: 5 },
+            { as: "textarea", rows: 5, disabled: this.state.discord, className: this.state.discord ? "opacity-50" : "" },
             "Enter one header per line in the format 'Header: Value'.",
           )}
         </Row>

tests/components/notifications/WebHookNotificationMethod.test.jsx

@@ -20,5 +20,47 @@ it("can set fields", async () => {
     method: "POST",
     format: "txt",
     headers: "some:header\nanother:header",
+    discord: false
   });
 });
+
+describe("Discord functionality", () => {
+  it("toggles Discord correctly and updates related fields", async () => {
+    let ref = React.createRef();
+    const { getByTestId } = render(<WebHookNotificationMethod ref={ref} />);
+
+    // Fill endpoint first so validation passes
+    fireEvent.change(getByTestId("control-endpoint"), {
+      target: { value: "http://some-endpoint:12345" },
+    });
+    expect(ref.current.validate()).toBe(true);
+
+    const discordCheckbox = getByTestId("discord");
+    const methodSelect = getByTestId("http-method");
+    const headersTextarea = getByTestId("control-headers");
+    const formatSelect = getByTestId("notification-format");
+
+    // Initially, Discord unchecked
+    expect(discordCheckbox.checked).toBe(false);
+    expect(methodSelect.value).toBe("POST");
+    expect(methodSelect.disabled).toBe(false);
+    expect(headersTextarea.disabled).toBe(false);
+    expect(formatSelect.value).toBe("txt");
+
+    // Toggle Discord ON
+    fireEvent.click(discordCheckbox);
+
+    expect(discordCheckbox.checked).toBe(true);
+    expect(methodSelect.value).toBe("POST");           // HTTP method forced to POST
+    expect(methodSelect.disabled).toBe(true);          // method disabled
+    expect(headersTextarea.disabled).toBe(true);       // headers disabled
+    expect(formatSelect.value).toBe("txt");            // format locked to plain text
+
+    // Toggle Discord OFF
+    fireEvent.click(discordCheckbox);
+
+    expect(discordCheckbox.checked).toBe(false);
+    expect(methodSelect.disabled).toBe(false);
+    expect(headersTextarea.disabled).toBe(false);
+  });
+});