Allow body for Webhooks

[dblythy]

What does it do?

This PR adds options for body to webhooks.

However, i'm struggling to work out how to resolve this API error on creating the webhook:

{"statusCode":400,"error":"Bad Request","message":"ValidationError","data":{"errors":{"undefined":["this field has unspecified keys: body"]}}}

I'm new to this project so any pointers would be appreciated.

I'm also not a react developer so code might need work.

Why is it needed?

I need this so I can build via GitHub actions.

Related issue(s)/PR(s)

Closes #7567

TODO:

• fix submit webhook bug
• add tests

[strapi-cla]

All committers have signed the CLA.

[codecov]

Codecov Report

Merging #9309 (4d2893c) into master (afaf111) will increase coverage by 19.64%.
The diff coverage is 75.00%.

@@             Coverage Diff             @@
##           master    #9309       +/-   ##
===========================================
+ Coverage   35.07%   54.71%   +19.64%     
===========================================
  Files        1308      135     -1173     
  Lines       14465     4386    -10079     
  Branches     1439      890      -549     
===========================================
- Hits         5074     2400     -2674     
+ Misses       8481     1564     -6917     
+ Partials      910      422      -488     

Flag	Coverage Δ
front	?
unit	54.71% <75.00%> (-0.17%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/strapi-utils/lib/sanitize-entity.js	97.10% <71.42%> (-2.90%)	⬇️
packages/strapi/lib/middlewares/session/index.js	39.28% <100.00%> (ø)
...n/src/components/CustomInputCheckbox/components.js
...min/admin/src/hooks/usePermissionsContext/index.js
.../strapi-admin/admin/src/validations/users/index.js
...src/components/Users/ModalCreateBody/utils/form.js
.../admin/src/components/Webhooks/EventInput/index.js
...in/src/containers/SingleTypeRecursivePath/index.js
...r/admin/src/components/PreviewCarret/components.js
...min/admin/src/containers/LanguageProvider/index.js
... and 1162 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 788a81d...16db85e. Read the comment docs.

[dblythy]

Never mind, I've located the problem. Will try to have this PR ready shortly.

[digitaljohn]

Hey @dblythy any news on this?

[dblythy]

Hey @dblythy any news on this?

All functional at this stage I’ve just gotta write some tests for the feature. Should be a wk or so

[digitaljohn]

@dblythy Do you want some assistance? I can try and jump in?

[dblythy]

@dblythy Do you want some assistance? I can try and jump in?

That would be good if you wouldn’t mind. I’ll share my fork with you.

[iamcryptoki]

I really NEED this feature to trigger GitHub Actions workflows on a non-default branch!

[alexandrebodin]

Hi @dblythy thank you for starting this PR.

This feature will evolve in the upcoming features for sure. We have a lot of ideas around the webhooks. That being said this isn't a top high priority just yet :/

From what I can see in your PR you are adding some key values to the body statically. Something that we could allow to fit your usecase without creating conflicts with what we plan for the feature could be a programmatic way to extend the body rather than configuring things in the UI. What do you think ?

[LiamDotPro]

@alexandrebodin Currently not being able to modify the content of the body is causing errors when trying to use webhooks with GitHub actions. We're required to pass data via the body such as:

{
  "event_type": "hello"
}

I can confirm that it also won't accept query parameters associated with the url and passing other variables in the header doesn't help the situation. The documentation for this can be found here https://docs.github.com/en/actions/reference/events-that-trigger-workflows

I've found a working workaround here: https://www.npmjs.com/package/strapi-plugin-github-actions

Though this is no ideal as we lose all of the 'automation' functionality such as being able to trigger workflows for publish, unpublish etc.

We don't have a choice to move away from github actions, is it possible someone can look into this again?

[alexandrebodin]

@LiamDotPro Thank you for the detailed response.

As said in my comment would a programmatic API to extend the webhook format would work for you ?

Some random example that comes to mind

config/server.js

webhooks: {
  fromatRequest(req, info) {
    if (info.webhook.url.includes('github.com')) {
      return {
        body: {
          event_type: 'some_type',
          ...req.body 
        },
        qs: {} // custom query string,
        headers: {} // custom headers 
      }
    }
  }
}

Would that work for you ?

[LiamDotPro]

@alexalexandrebodin Yeah that looks spot on 👍🏻

[alexandrebodin]

We don't have this on the todo for a while but if someone wants to work on a PR for that it should be a pretty straight forward PR to work on :)

[LiamDotPro]

@alexandrebodin I'll try and take a stab at it sometime this evening or weekend.

[digitaljohn]

@dblythy @iamcryptoki I just released this plugin which takes a different approach, it may be helpful to you.
https://www.npmjs.com/package/strapi-plugin-github-publish

[strapi-bot]

This pull request has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/webhook-doesnt-take-a-body/15425/2

[Ramos-Guilherme]

@LiamDotPro Thank you for the detailed response.

As said in my comment would a programmatic API to extend the webhook format would work for you ?

Some random example that comes to mind

config/server.js

webhooks: {
  fromatRequest(req, info) {
    if (info.webhook.url.includes('github.com')) {
      return {
        body: {
          event_type: 'some_type',
          ...req.body 
        },
        qs: {} // custom query string,
        headers: {} // custom headers 
      }
    }
  }
}

Would that work for you ?

@alexandrebodin what do you think about using event-hub directly?

For example, I'm using the following code to trigger Github Actions when content is published:

//src/index.ts
bootstrap({ strapi }: { strapi: Strapi }) {
    const octokit = new Octokit({ auth: `TOKEN` });

    const listener = strapi.eventHub.on("entry.publish", async () => {
      try {
        await octokit.request(
          "POST /repos/{owner}/{repo}/actions/workflows/{workflow_id}/dispatches",
          {
            owner: "OWNER",
            repo: "REPO",
            workflow_id: "ID",
            ref: "branch",
            headers: {
              "X-GitHub-Api-Version": "2022-11-28",
            },
          }
        );
      } catch (error) {
        //add error handling
      }
    });
  },

Is that a valid workaround?

[ohuu]

What happened to this PR? I really need it to trigger rebuilds in DigitalOcean.

[u11d-michal-miler]

TL;DR: Our solution is not ideal but you can use Strapi as a proxy server and pass body using a custom endpoint until setting request body is allowed by Strapi.

Check out our step-by-step tutorial demonstrating a clean and practical integration approach. Full guide available here: https://uninterrupted.tech/blog/passing-body-data-in-strapi-webhooks-triggering-git-hub-workflows-example/