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