feat: add on cache purge option to webhooks

Author: svedova

src/pages/apps/[id]/settings/_components/FormOutboundWebhookModal.spec.tsx

@@ -36,6 +36,24 @@ describe("~/pages/apps/[id]/settings/_components/FormOutboundWebhookModal", () =
     );
   };
 
+  describe("always", () => {
+    beforeEach(() => {
+      currentApp = mockApp();
+      createWrapper({ app: currentApp });
+    });
+
+    it("should contain a help button which opens the help drawer", async () => {
+      expect(wrapper.getByText("Help")).toBeTruthy();
+      fireEvent.click(wrapper.getByText("Help"));
+
+      await waitFor(() => {
+        expect(
+          wrapper.getByText(/Outbound webhooks are HTTP requests/)
+        ).toBeTruthy();
+      });
+    });
+  });
+
   describe("create", () => {
     beforeEach(() => {
       currentApp = mockApp();

src/pages/apps/[id]/settings/_components/FormOutboundWebhookModal.tsx

@@ -20,6 +20,7 @@ import Card from "~/components/Card";
 import CardHeader from "~/components/CardHeader";
 import CardFooter from "~/components/CardFooter";
 import { upsertOutboundWebhook } from "../_actions/outbound_webhook_actions";
+import Help from "~/components/Help/Help";
 
 interface Props {
   app: App;
@@ -283,10 +284,70 @@ export default function FormNewOutboundWebhookModal({
               After each failed deployment
             </Option>
             <Option value={"on_publish"}>After deployment is published</Option>
+            <Option value={"on_cache_purge"}>After cache is purged</Option>
           </Select>
         </FormControl>
 
-        <CardFooter>
+        <CardFooter sx={{ display: "flex", justifyContent: "space-between" }}>
+          <Help
+            title="Outbound webhooks"
+            subtitle="Automate workflows by sending HTTP requests to external services when specific events occur in your application deployment lifecycle."
+          >
+            <Typography variant="subtitle1" sx={{ fontWeight: "bold", mb: 1 }}>
+              Overview
+            </Typography>
+            <Typography color="text.secondary" sx={{ mb: 2 }}>
+              Outbound webhooks are HTTP requests that are triggered by specific
+              events in your application deployment lifecycle. You can configure
+              the request method, headers, and payload to suit your needs.
+            </Typography>
+            <Typography variant="subtitle1" sx={{ fontWeight: "bold", mb: 1 }}>
+              Events
+            </Typography>
+
+            <Typography variant="subtitle1" sx={{ fontWeight: "bold", mb: 1 }}>
+              1. After each successful deployment
+            </Typography>
+            <Typography color="text.secondary">
+              The webhook will be triggered after every successful deployment of
+              your application. A successful deployment means that your code has
+              been built and deployed without any errors. This event cycle
+              occurs before status checks are run.
+            </Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ fontWeight: "bold", mt: 2, mb: 1 }}
+            >
+              2. After each failed deployment
+            </Typography>
+            <Typography color="text.secondary">
+              The webhook will be triggered after every failed deployment. This
+              event cycle occurs before status checks are run.
+            </Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ fontWeight: "bold", mt: 2, mb: 1 }}
+            >
+              3.After a deployment is published
+            </Typography>
+            <Typography color="text.secondary">
+              The webhook will be triggered after a deployment is published.
+              This event cycle occurs after status checks are run.
+            </Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ fontWeight: "bold", mt: 2, mb: 1 }}
+            >
+              4.After a cache purge
+            </Typography>
+            <Typography color="text.secondary">
+              Cache is purged after the following events:
+              <br />
+              <br />- A deployment is published
+              <br />- Any operation to snippets
+              <br />- The environment configuration is updated
+            </Typography>
+          </Help>
           <Button
             variant="contained"
             color="secondary"

src/pages/apps/[id]/settings/_components/FormOutboundWebhooks.spec.tsx

@@ -1,3 +1,4 @@
+import { describe, beforeEach, it, expect } from "vitest";
 import type { OutboundWebhook } from "../types";
 import { fireEvent, RenderResult } from "@testing-library/react";
 import { waitFor, render } from "@testing-library/react";
@@ -35,21 +36,21 @@ describe("~/pages/apps/[id]/settings/_components/FormOutboundWebhooks", () => {
     createWrapper({ app: currentApp });
   });
 
-  test("the button is at loading state initially", () => {
+  it("the button is at loading state initially", () => {
     expect(wrapper.getByLabelText("Add new webhook").innerHTML).toContain(
       "<svg"
     );
   });
 
-  test("the button is not at loading state when the query has loaded", async () => {
+  it("the button is not at loading state when the query has loaded", async () => {
     await waitFor(() => {
       expect(wrapper.getByLabelText("Add new webhook").innerHTML).not.toContain(
         "spinner"
       );
     });
   });
 
-  test("should handle webhook deletion", async () => {
+  it("should handle webhook deletion", async () => {
     await waitFor(() => {
       expect(wrapper.getAllByLabelText("expand")).toHaveLength(2);
     });
@@ -80,7 +81,7 @@ describe("~/pages/apps/[id]/settings/_components/FormOutboundWebhooks", () => {
     });
   });
 
-  test("clicking add new webhook opens a modal", async () => {
+  it("clicking add new webhook opens a modal", async () => {
     await waitFor(() => {
       expect(
         wrapper.getAllByText("Triggered after a deployment is published")
@@ -96,7 +97,7 @@ describe("~/pages/apps/[id]/settings/_components/FormOutboundWebhooks", () => {
     });
   });
 
-  test.each`
+  it.each`
     description    | endpoint
     ${"short url"} | ${"https://discord.com/example/endpoint"}
     ${"long url"}  | ${"https://discord.com/api/webhooks/example/endpoint..."}

src/pages/apps/[id]/settings/_components/FormOutboundWebhooks.tsx

@@ -28,6 +28,7 @@ const messages: Record<TriggerWhen, string> = {
   on_deploy_success: "Triggered after each successful deployment",
   on_deploy_failed: "Triggered after each failed deployment",
   on_publish: "Triggered after a deployment is published",
+  on_cache_purge: "Triggered after a cache purge",
 };
 
 const FormOutboundWebhooks: React.FC<Props> = ({ app }): React.ReactElement => {

src/pages/apps/[id]/settings/types.d.ts

@@ -18,7 +18,8 @@ export type AllowedMethod = "GET" | "POST" | "HEAD";
 export type TriggerWhen =
   | "on_deploy_success"
   | "on_deploy_failed"
-  | "on_publish";
+  | "on_publish"
+  | "on_cache_purge";
 
 export interface OutboundWebhook {
   id?: string;