Downgrade mintlify to 2.0.16, add more to blockActionInteraction, and fix pnpm install commands

This commit is contained in:
Eric Allam
2023-02-06 10:45:05 +00:00
parent f02eeb0af9
commit 46fc33ca15
10 changed files with 376 additions and 46 deletions
+5 -5
View File
@@ -4,16 +4,16 @@ sidebarTitle: "GitHub"
description: "Here are some example workflows you could create using the GitHub integration."
---
You can explore all the supported GitHub functions [here](/integrations/apis/github/events/push).
### Example workflows:
## When a GitHub repo is starred, post information about the user to Slack
Integrations required: GitHub, Slack
Packages required:
<Tabs>
<Tab title="npm">
@@ -25,7 +25,7 @@ npm install @trigger.dev/github @trigger.dev/slack
<Tab title="pnpm">
```bash
pnpm install @trigger.dev/github @trigger.dev/slack
pnpm add @trigger.dev/github @trigger.dev/slack
```
</Tab>
@@ -61,12 +61,12 @@ new Trigger({
}).listen();
```
## When a GitHub issue is created or modified, post to Slack
Integrations required: GitHub, Slack
Packages required:
<Tabs>
<Tab title="npm">
@@ -78,7 +78,7 @@ npm install @trigger.dev/github @trigger.dev/slack
<Tab title="pnpm">
```bash
pnpm install @trigger.dev/github @trigger.dev/slack
pnpm add @trigger.dev/github @trigger.dev/slack
```
</Tab>
+6 -3
View File
@@ -5,10 +5,12 @@ description: "Here are some example workflows you could create using the Resend
---
<Tip>
Resend.com is currently in private beta but you can request early access [here](https://resend.com/).
Resend.com is currently in private beta but you can request early access
[here](https://resend.com/).
</Tip>
### Example workflows:
## Welcome email drip campaign
This workflow will get triggered and a Slack notification and welcome email will be sent straight away.
@@ -17,6 +19,7 @@ This workflow will get triggered and a Slack notification and welcome email will
Integrations required: Resend, Slack
Packages required:
<Tabs>
<Tab title="npm">
@@ -28,7 +31,7 @@ npm install @trigger.dev/resend @trigger.dev/slack
<Tab title="pnpm">
```bash
pnpm install @trigger.dev/resend @trigger.dev/slack
pnpm add @trigger.dev/resend @trigger.dev/slack
```
</Tab>
@@ -116,4 +119,4 @@ new Trigger({
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
></iframe>
+2 -1
View File
@@ -11,6 +11,7 @@ description: "Here are some example workflows you could create using the Shopify
Integrations required: Shopify
Packages required:
<Tabs>
<Tab title="npm">
@@ -22,7 +23,7 @@ npm install @trigger.dev/shopify
<Tab title="pnpm">
```bash
pnpm install @trigger.dev/shopify
pnpm add @trigger.dev/shopify
```
</Tab>
+3 -3
View File
@@ -4,13 +4,14 @@ sidebarTitle: "Slack"
description: "Here are some example workflows you could create using the Slack integration."
---
### Example workflows:
## Post to Slack when a GitHub issue is created or modified
Integrations required: Slack, GitHub
Packages required:
<Tabs>
<Tab title="npm">
@@ -22,7 +23,7 @@ npm install @trigger.dev/slack @trigger.dev/github
<Tab title="pnpm">
```bash
pnpm install @trigger.dev/slack @trigger.dev/github
pnpm add @trigger.dev/slack @trigger.dev/github
```
</Tab>
@@ -37,7 +38,6 @@ yarn add @trigger.dev/slack @trigger.dev/github
Workflow code:
```ts
import { Trigger, customEvent } from "@trigger.dev/sdk";
import * as slack from "@trigger.dev/slack";
+2 -1
View File
@@ -13,6 +13,7 @@ For more information about the WhatsApp integration, check out the [integration
Integrations required: WhatsApp
Packages required:
<Tabs>
<Tab title="npm">
@@ -24,7 +25,7 @@ npm install @trigger.dev/whatsapp
<Tab title="pnpm">
```bash
pnpm install @trigger.dev/whatsapp
pnpm add @trigger.dev/whatsapp
```
</Tab>
+1 -1
View File
@@ -29,7 +29,7 @@ npm install @trigger.dev/sdk @trigger.dev/slack zod
<Tab title="pnpm">
```bash
pnpm install @trigger.dev/sdk @trigger.dev/slack zod
pnpm add @trigger.dev/sdk @trigger.dev/slack zod
```
</Tab>
@@ -106,6 +106,298 @@ new Trigger({
</CodeGroup>
## Passing custom data
There are three ways to pass custom data to the workflow that is triggered by the event:
1. Use the `value` field of the BlockKit component. This is the easiest way to pass data, but it is limited to 2000 characters.
2. Use the `metadata` option when sending the message. This is best for handling "context" data that relates to any possible action taken in a BlockKit message.
An example of using the `value` field:
<CodeGroup>
```ts postMessage.ts
await slack.postMessage("New Issue", {
channelName: "github-issues",
//text appears in Slack notifications on mobile/desktop
text: "There is a new GitHub issue in the repo",
blocks: [
{
type: "actions",
block_id: "new.issue", // this is the block_id that we'll use to identify the message
elements: [
{
type: "button",
action_id: "reply",
text: {
type: "plain_text",
text: "Reply to Issue",
},
value: githubIssueId,
},
{
type: "button",
action_id: "close",
text: {
type: "plain_text",
text: "Close Issue",
},
value: githubIssueId,
},
],
},
],
});
```
```ts trigger.ts
new Trigger({
id: "github-issue-slack-interaction",
name: "GitHub Issue Slack Interaction",
on: slack.events.blockActionInteraction({
blockId: "new.issue",
}),
run: async (event, ctx) => {
const action = event.actions[0];
if (action.action_id === "reply") {
// action.value is the githubIssueId
} else if (action.action_id === "close") {
// action.value is the githubIssueId
}
},
}).listen();
```
</CodeGroup>
And an example using the `metadata` option (which can be any JSON-serializable data):
<CodeGroup>
```ts postMessage.ts
await slack.postMessage("New Issue", {
channelName: "github-issues",
//text appears in Slack notifications on mobile/desktop
text: "There is a new GitHub issue in the repo",
metadata: { githubIssueId },
blocks: [
{
type: "actions",
block_id: "new.issue", // this is the block_id that we'll use to identify the message
elements: [
{
type: "button",
action_id: "reply",
text: {
type: "plain_text",
text: "Reply to Issue",
},
value: "reply",
},
{
type: "button",
action_id: "close",
text: {
type: "plain_text",
text: "Close Issue",
},
value: "close",
},
],
},
],
});
```
```ts trigger.ts
new Trigger({
id: "github-issue-slack-interaction",
name: "GitHub Issue Slack Interaction",
on: slack.events.blockActionInteraction({
blockId: "new.issue",
}),
run: async (event, ctx) => {
const action = event.actions[0];
if (action.action_id === "reply") {
// event.message.metadata.event_payload.githubIssueId is the githubIssueId
} else if (action.action_id === "close") {
// event.message.metadata.event_payload.githubIssueId is the githubIssueId
}
},
}).listen();
```
</CodeGroup>
## JSX Slack
You can use the [JSX Slack](https://github.com/yhatt/jsx-slack/) project to build your BlockKit messages and trigger the `blockActionInteraction` event.
### Step 1: Install and configure JSX Slack
<Tabs>
<Tab title="npm">
```bash
npm install jsx-slack
```
</Tab>
<Tab title="pnpm">
```bash
pnpm add jsx-slack
```
</Tab>
<Tab title="yarn">
```bash
yarn add jsx-slack
```
</Tab>
</Tabs>
If you aren't already using React in your project, you will need to update your `tsconfig.json` file to add the `compilerOptions.jsx` option:
```json
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
```
### Step 2: Create your BlockKit message
```tsx
/** @jsxImportSource jsx-slack */
import JSXSlack, {
Actions,
Blocks,
Button,
Section,
Select,
Option,
} from "jsx-slack";
export function progressBlock(blockId: string) {
return JSXSlack(
<Blocks>
<Section>How is your progress today?</Section>
<Actions blockId={blockId}>
<Button value="blocked" actionId="status-blocked">
I'm blocked
</Button>
<Button
value="help"
actionId="status-help"
url="https://xkcd.com/1349/"
>
Get help
</Button>
<Select actionId="rating" placeholder="Rate it!">
<Option value="5">5 {":star:".repeat(5)}</Option>
<Option value="4">4 {":star:".repeat(4)}</Option>
<Option value="3">3 {":star:".repeat(3)}</Option>
<Option value="2">2 {":star:".repeat(2)}</Option>
<Option value="1">1 {":star:".repeat(1)}</Option>
</Select>
</Actions>
</Blocks>
);
}
```
Please note, that to use `jsx-slack` you will need to add the `jsxImportSource` pragma to the top of your file. This is because `jsx-slack` is not a React library, but it uses the same syntax as React. The file also needs to be a `.jsx` or `.tsx` file (like when you use React).
### Step 3: Use your BlockKit message in a `postMessage` call
<CodeGroup>
```typescript postMessage.ts
import * as slack from "@trigger.dev/slack";
import { z } from "zod";
import { progressBlock } from "./messages";
const BLOCK_ID = "issue.action.block";
//1. every minute see how your employees are doing, we don't recommend this frequency 😉
new Trigger({
id: "slack-interactivity",
name: "Testing Slack Interactivity",
on: scheduleEvent({
rateOf: {
minutes: 1,
},
}),
run: async (event, ctx) => {
await slack.postMessage("jsx-test", {
channelName: "employee-progress",
text: "How is your progress today?",
blocks: progressBlock(BLOCK_ID), // Pass in the block_id which we'll trigger on in the next step
});
},
}).listen();
```
```typescript blockAction.ts
new Trigger({
id: "slack-block-interaction",
name: "Slack Block Interaction",
on: slack.events.blockActionInteraction({
blockId: BLOCK_ID, // trigger on the block_id we passed in the previous step
actionId: ["status-blocked", "status-help", "rating"], // we could have also left this blank to trigger on all actions
}),
run: async (event, ctx) => {
if (!event.message) {
return;
}
const action = event.actions[0];
switch (action.action_id) {
case "status-blocked": {
return slack.addReaction("React to message", {
name: "cry",
timestamp: event.message.ts,
channelId: event.channel.id,
});
}
case "status-help": {
return slack.addReaction("React to message", {
name: "sos",
timestamp: event.message.ts,
channelId: event.channel.id,
});
}
case "rating": {
if (action.type != "static_select") {
throw new Error("This action should be a select");
}
//post the rating as a message that appears below the original,
//only the user pressing the button will see this message
return slack.postMessageResponse(
"Added a comment to the issue",
event.response_url,
{
text: `You rated your day ${action.selected_option?.value} stars`,
replace_original: false,
}
);
}
}
},
}).listen();
```
</CodeGroup>
## Params
<ParamField path="blockId" type="string" required={true}>
@@ -162,3 +454,24 @@ Please see the [Slack Block Actions event payload](https://api.slack.com/referen
<ResponseField name="channel" type="channel object">
The channel where the interaction took place.
</ResponseField>
<ResponseField name="container" type="object">
<Expandable title="properties">
<ResponseField name="type" type="string">
The type of container. This will always be `message`.
</ResponseField>
<ResponseField name="message_ts" type="string">
The timestamp of the message that the user interacted with.
</ResponseField>
<ResponseField name="channel_id" type="string">
The ID of the channel where the interaction took place.
</ResponseField>
<ResponseField name="is_ephemeral" type="boolean">
Whether the message is ephemeral.
</ResponseField>
</Expandable>
</ResponseField>
+2 -2
View File
@@ -7,6 +7,6 @@
"dev": "mintlify dev --port 3050"
},
"devDependencies": {
"mintlify": "^2.0.17"
"mintlify": "2.0.16"
}
}
}
@@ -53,7 +53,7 @@ export function InstallPackages({ packages }: { packages: string }) {
</Tab.Panel>
<Tab.Panel className="relative h-full">
<CodeBlock
code={`pnpm install ${packages}`}
code={`pnpm add ${packages}`}
language="bash"
align="top"
showLineNumbers={false}
+41 -29
View File
@@ -31,9 +31,9 @@ importers:
apps/docs:
specifiers:
mintlify: ^2.0.17
mintlify: 2.0.16
devDependencies:
mintlify: 2.0.17
mintlify: 2.0.16
apps/webapp:
specifiers:
@@ -192,7 +192,7 @@ importers:
'@aws-sdk/client-s3': 3.245.0
'@aws-sdk/s3-request-presigner': 3.245.0
'@cfworker/json-schema': 1.12.5
'@codemirror/autocomplete': 6.4.0_eo6pz6bvsllvatnnwfprpuflde
'@codemirror/autocomplete': 6.4.0_czcfkg2f66rxeiodoti7r2gulu
'@codemirror/commands': 6.1.3
'@codemirror/lang-javascript': 6.1.2
'@codemirror/lang-json': 6.0.1
@@ -222,7 +222,7 @@ importers:
'@trigger.dev/slack': link:../../integrations/slack
'@trigger.dev/whatsapp': link:../../integrations/whatsapp
'@typeform/embed-react': 2.14.1_react@18.2.0
'@uiw/react-codemirror': 4.19.5_aguurb4bmecpxzejz52amioxne
'@uiw/react-codemirror': 4.19.5_k4ec5g7vuuzzonc3d6xbjnmmle
bcryptjs: 2.4.3
classnames: 2.3.2
clsx: 1.2.1
@@ -661,7 +661,7 @@ importers:
tsup: ^6.5.0
zod: ^3.20.2
dependencies:
'@react-email/render': 0.0.3_react@18.2.0
'@react-email/render': 0.0.3
debug: 4.3.4
zod: 3.20.2
devDependencies:
@@ -3574,13 +3574,12 @@ packages:
prettier: 2.8.2
dev: false
/@codemirror/autocomplete/6.4.0_eo6pz6bvsllvatnnwfprpuflde:
/@codemirror/autocomplete/6.4.0_czcfkg2f66rxeiodoti7r2gulu:
resolution: {integrity: sha512-HLF2PnZAm1s4kGs30EiqKMgD7XsYaQ0XJnMR0rofEWQ5t5D60SfqpDIkIh1ze5tiEbyUWm8+VJ6W1/erVvBMIA==}
peerDependencies:
'@codemirror/language': ^6.0.0
'@codemirror/state': ^6.0.0
'@codemirror/view': ^6.0.0
'@lezer/common': ^1.0.0
dependencies:
'@codemirror/language': 6.3.2
'@codemirror/state': 6.2.0
@@ -3600,7 +3599,7 @@ packages:
/@codemirror/lang-javascript/6.1.2:
resolution: {integrity: sha512-OcwLfZXdQ1OHrLiIcKCn7MqZ7nx205CMKlhe+vL88pe2ymhT9+2P+QhwkYGxMICj8TDHyp8HFKVwpiisUT7iEQ==}
dependencies:
'@codemirror/autocomplete': 6.4.0_eo6pz6bvsllvatnnwfprpuflde
'@codemirror/autocomplete': 6.4.0_czcfkg2f66rxeiodoti7r2gulu
'@codemirror/language': 6.3.2
'@codemirror/lint': 6.1.0
'@codemirror/state': 6.2.0
@@ -4802,6 +4801,16 @@ packages:
react-dom: 18.2.0_react@18.2.0
dev: false
/@react-email/render/0.0.3:
resolution: {integrity: sha512-+4eOrLGdTCJjoJU3PunekErjo3PFnhSDFjVINBHrfJT+1wlVdhWfDo7hFdzXJx/JOOYqmnZTilU/umGLdRumKQ==}
engines: {node: '>=18.0.0'}
dependencies:
pretty: 2.0.0
react-dom: 18.2.0
transitivePeerDependencies:
- react
dev: false
/@react-email/render/0.0.3_react@18.2.0:
resolution: {integrity: sha512-+4eOrLGdTCJjoJU3PunekErjo3PFnhSDFjVINBHrfJT+1wlVdhWfDo7hFdzXJx/JOOYqmnZTilU/umGLdRumKQ==}
engines: {node: '>=18.0.0'}
@@ -4922,7 +4931,7 @@ packages:
eslint: 8.31.0
eslint-import-resolver-node: 0.3.6
eslint-import-resolver-typescript: 3.5.3_hnftvkj7qg3s6bbigj4pr6djxy
eslint-plugin-import: 2.27.4_qdjeohovcytra7xto5vgmxssaq
eslint-plugin-import: 2.27.4_2ac3tknkazjoq5fxmuugu665ny
eslint-plugin-jest: 26.9.0_ohsifnwenhmxgcp7mend4dnv74
eslint-plugin-jest-dom: 4.0.3_eslint@8.31.0
eslint-plugin-jsx-a11y: 6.7.1_eslint@8.31.0
@@ -6046,18 +6055,17 @@ packages:
eslint-visitor-keys: 3.3.0
dev: true
/@uiw/codemirror-extensions-basic-setup/4.19.5_tbeldtdcrf45b35pezgkzq2u4e:
/@uiw/codemirror-extensions-basic-setup/4.19.5_wd2tsis3in55bkaiwnc2c46tom:
resolution: {integrity: sha512-1zt7ZPJ01xKkSW/KDy0FZNga0bngN1fC594wCVG7FBi60ehfcAucpooQ+JSPScKXopxcb+ugPKZvVLzr9/OfzA==}
peerDependencies:
'@codemirror/autocomplete': '>=6.0.0'
'@codemirror/commands': '>=6.0.0'
'@codemirror/language': '>=6.0.0'
'@codemirror/lint': '>=6.0.0'
'@codemirror/search': '>=6.0.0'
'@codemirror/state': '>=6.0.0'
'@codemirror/view': '>=6.0.0'
dependencies:
'@codemirror/autocomplete': 6.4.0_eo6pz6bvsllvatnnwfprpuflde
'@codemirror/autocomplete': 6.4.0_czcfkg2f66rxeiodoti7r2gulu
'@codemirror/commands': 6.1.3
'@codemirror/language': 6.3.2
'@codemirror/lint': 6.1.0
@@ -6066,14 +6074,11 @@ packages:
'@codemirror/view': 6.7.2
dev: false
/@uiw/react-codemirror/4.19.5_aguurb4bmecpxzejz52amioxne:
/@uiw/react-codemirror/4.19.5_k4ec5g7vuuzzonc3d6xbjnmmle:
resolution: {integrity: sha512-ZCHh8d7beXbF8/t7F1+yHht6A9Y6CdKeOkZq4A09lxJEnyTQrj1FMf2zvfaqc7K23KNjkTCtSlbqKKbVDgrWaw==}
peerDependencies:
'@babel/runtime': '>=7.11.0'
'@codemirror/state': '>=6.0.0'
'@codemirror/theme-one-dark': '>=6.0.0'
'@codemirror/view': '>=6.0.0'
codemirror: '>=6.0.0'
react: '>=16.8.0'
react-dom: '>=16.8.0'
dependencies:
@@ -6082,14 +6087,13 @@ packages:
'@codemirror/state': 6.2.0
'@codemirror/theme-one-dark': 6.1.0
'@codemirror/view': 6.7.2
'@uiw/codemirror-extensions-basic-setup': 4.19.5_tbeldtdcrf45b35pezgkzq2u4e
codemirror: 6.0.1_@lezer+common@1.0.2
'@uiw/codemirror-extensions-basic-setup': 4.19.5_wd2tsis3in55bkaiwnc2c46tom
codemirror: 6.0.1
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
transitivePeerDependencies:
- '@codemirror/autocomplete'
- '@codemirror/language'
- '@codemirror/lint'
- '@codemirror/search'
dev: false
@@ -7426,18 +7430,16 @@ packages:
engines: {node: '>=0.10.0'}
dev: false
/codemirror/6.0.1_@lezer+common@1.0.2:
/codemirror/6.0.1:
resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
dependencies:
'@codemirror/autocomplete': 6.4.0_eo6pz6bvsllvatnnwfprpuflde
'@codemirror/autocomplete': 6.4.0_czcfkg2f66rxeiodoti7r2gulu
'@codemirror/commands': 6.1.3
'@codemirror/language': 6.3.2
'@codemirror/lint': 6.1.0
'@codemirror/search': 6.2.3
'@codemirror/state': 6.2.0
'@codemirror/view': 6.7.2
transitivePeerDependencies:
- '@lezer/common'
dev: false
/collection-visit/1.0.0:
@@ -8778,7 +8780,7 @@ packages:
debug: 4.3.4
enhanced-resolve: 5.12.0
eslint: 8.31.0
eslint-plugin-import: 2.27.4_qdjeohovcytra7xto5vgmxssaq
eslint-plugin-import: 2.27.4_2ac3tknkazjoq5fxmuugu665ny
get-tsconfig: 4.3.0
globby: 13.1.3
is-core-module: 2.11.0
@@ -8788,7 +8790,7 @@ packages:
- supports-color
dev: true
/eslint-module-utils/2.7.4_sqt5xxn4ciiurbqrzlaarm6ama:
/eslint-module-utils/2.7.4_v73lhamtbyinynmwa5fn7kpmfq:
resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
engines: {node: '>=4'}
peerDependencies:
@@ -8813,6 +8815,7 @@ packages:
debug: 3.2.7
eslint: 8.31.0
eslint-import-resolver-node: 0.3.7
eslint-import-resolver-typescript: 3.5.3_hnftvkj7qg3s6bbigj4pr6djxy
transitivePeerDependencies:
- supports-color
dev: true
@@ -8837,7 +8840,7 @@ packages:
regexpp: 3.2.0
dev: true
/eslint-plugin-import/2.27.4_qdjeohovcytra7xto5vgmxssaq:
/eslint-plugin-import/2.27.4_2ac3tknkazjoq5fxmuugu665ny:
resolution: {integrity: sha512-Z1jVt1EGKia1X9CnBCkpAOhWy8FgQ7OmJ/IblEkT82yrFU/xJaxwujaTzLWqigewwynRQ9mmHfX9MtAfhxm0sA==}
engines: {node: '>=4'}
peerDependencies:
@@ -8855,7 +8858,7 @@ packages:
doctrine: 2.1.0
eslint: 8.31.0
eslint-import-resolver-node: 0.3.7
eslint-module-utils: 2.7.4_sqt5xxn4ciiurbqrzlaarm6ama
eslint-module-utils: 2.7.4_v73lhamtbyinynmwa5fn7kpmfq
has: 1.0.3
is-core-module: 2.11.0
is-glob: 4.0.3
@@ -12552,8 +12555,8 @@ packages:
yallist: 4.0.0
dev: true
/mintlify/2.0.17:
resolution: {integrity: sha512-W7pyIj0AGJYR+vR8E08E7BTMhANW2Kfe3NpfNRdMp+TL1ju50iN49U2T+MBCKQJAycCwXXX2nXf3Cve5sIDdzA==}
/mintlify/2.0.16:
resolution: {integrity: sha512-8SppN2c2F6rt2QlYkDIqZZV9S2jXuUUbWo75eDGURMRfWxpFKGCRxsueY0Oerq/yO/Mlzg5ZNHutJHRipCgLcg==}
engines: {node: '>=18.0.0'}
hasBin: true
dependencies:
@@ -14033,6 +14036,15 @@ packages:
shallow-equal: 1.2.1
dev: false
/react-dom/18.2.0:
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
peerDependencies:
react: ^18.2.0
dependencies:
loose-envify: 1.4.0
scheduler: 0.23.0
dev: false
/react-dom/18.2.0_react@18.2.0:
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
peerDependencies: