diff --git a/apps/webapp/app/components/helpContent/HelpContentText.tsx b/apps/webapp/app/components/helpContent/HelpContentText.tsx
index 3c0232d4a..bfe1aad12 100644
--- a/apps/webapp/app/components/helpContent/HelpContentText.tsx
+++ b/apps/webapp/app/components/helpContent/HelpContentText.tsx
@@ -1,23 +1,26 @@
import { Paragraph, TextLink } from "~/components/primitives/Paragraph";
import { StepNumber } from "~/components/primitives/StepNumber";
-import { IntegrationIcon } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route";
-import { Callout } from "../primitives/Callout";
-import integrationButton from "./integration-button.png";
-import ngrok from "./ngrok.png";
-import publicUrl from "./public-url.png";
+import { useAppOrigin } from "~/hooks/useAppOrigin";
import { useDevEnvironment } from "~/hooks/useEnvironments";
-import { ClipboardField } from "../primitives/ClipboardField";
+import { IntegrationIcon } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route";
import { Button } from "../primitives/Buttons";
-import { InlineCode } from "../code/InlineCode";
+import { Callout } from "../primitives/Callout";
import {
ClientTabs,
ClientTabsContent,
ClientTabsList,
ClientTabsTrigger,
} from "../primitives/ClientTabs";
+import { ClipboardField } from "../primitives/ClipboardField";
+import integrationButton from "./integration-button.png";
+import ngrok from "./ngrok.png";
+import publicUrl from "./public-url.png";
+import selectEnvironment from "./select-environment.png";
+import selectExample from "./select-example.png";
export function HowToSetupYourProject() {
const devEnvironment = useDevEnvironment();
+ const appOrigin = useAppOrigin();
return (
<>
@@ -102,24 +105,24 @@ export function HowToSetupYourProject() {
`}
+ secure={`npx @trigger.dev/init@latest -k ••••••••• -t ${appOrigin} -u `}
+ value={`npx @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t ${appOrigin} -u `}
/>
`}
+ secure={`pnpm dlx @trigger.dev/init@latest -k ••••••••• -t ${appOrigin} -u `}
+ value={`pnpm dlx @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t ${appOrigin} -u `}
/>
`}
+ secure={`yarn @trigger.dev/init@latest -k ••••••••• -t ${appOrigin} -u `}
+ value={`yarn @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t ${appOrigin} -u `}
/>
@@ -159,9 +162,31 @@ export function HowToSetupYourProject() {
export function HowToRunATest() {
return (
<>
-
+
- Content
+
+ Select the environment you’d like the test to run against.
+
+
+
+
+
+
+ Write your own payload specific to your Job. Some Triggers also
+ provide example payloads that you can select from. This will populate
+ the code editor below.
+
+
+
+
+
+
+ When you’re happy with the payload, click Run test.
+
>
);
diff --git a/apps/webapp/app/components/helpContent/select-environment.png b/apps/webapp/app/components/helpContent/select-environment.png
new file mode 100644
index 000000000..afb676381
Binary files /dev/null and b/apps/webapp/app/components/helpContent/select-environment.png differ
diff --git a/apps/webapp/app/components/helpContent/select-example.png b/apps/webapp/app/components/helpContent/select-example.png
new file mode 100644
index 000000000..a12285919
Binary files /dev/null and b/apps/webapp/app/components/helpContent/select-example.png differ