Skip to content

feat(dashboard): move webhook buttons below collapsible curl blocks #933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zbigniewsobiecki merged 1 commit into from
Mar 17, 2026
Merged

feat(dashboard): move webhook buttons below collapsible curl blocks #933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 24 additions & 22 deletions web/src/components/projects/integration-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,30 @@ function GitHubWebhookSection({ projectId }: { projectId: string }) {
</div>
)}

{/* curl instructions for manual GitHub webhook creation (collapsible) */}
<details className="rounded-md border border-blue-200 bg-blue-50 px-3 py-3 dark:border-blue-900/50 dark:bg-blue-900/20">
<summary className="flex items-start gap-2 cursor-pointer list-none">
<Info className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
<p className="text-xs text-blue-700 dark:text-blue-300 font-medium">
Manual webhook creation (alternative: if the button below doesn't work)
</p>
</summary>
<div className="space-y-2 mt-2">
<p className="text-xs text-blue-600 dark:text-blue-400 pl-6">
Use the following curl command to create the GitHub webhook manually. Requires a token
with <code>admin:repo_hook</code> scope.
</p>
<div className="relative rounded-md bg-muted border pl-6">
<div className="absolute top-2 right-2">
<CopyButton text={githubCurlCommand} />
</div>
<pre className="text-xs font-mono whitespace-pre-wrap break-all py-2 pr-16 overflow-x-auto">
{githubCurlCommand}
</pre>
</div>
</div>
</details>

{/* Create webhook button */}
<div className="space-y-2">
<button
Expand All @@ -270,28 +294,6 @@ function GitHubWebhookSection({ projectId }: { projectId: string }) {
</p>
)}
</div>

{/* curl instructions for manual GitHub webhook creation */}
<div className="rounded-md border border-blue-200 bg-blue-50 px-3 py-3 space-y-2 dark:border-blue-900/50 dark:bg-blue-900/20">
<div className="flex items-start gap-2">
<Info className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
<p className="text-xs text-blue-700 dark:text-blue-300 font-medium">
Manual webhook creation (if the button above doesn't work)
</p>
</div>
<p className="text-xs text-blue-600 dark:text-blue-400 pl-6">
Use the following curl command to create the GitHub webhook manually. Requires a token
with <code>admin:repo_hook</code> scope.
</p>
<div className="relative rounded-md bg-muted border pl-6">
<div className="absolute top-2 right-2">
<CopyButton text={githubCurlCommand} />
</div>
<pre className="text-xs font-mono whitespace-pre-wrap break-all py-2 pr-16 overflow-x-auto">
{githubCurlCommand}
</pre>
</div>
</div>
</div>
);
}
Expand Down
46 changes: 24 additions & 22 deletions web/src/components/projects/pm-wizard-common-steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,30 @@ export function WebhookStep({
</div>
)}

{/* curl instructions for manual webhook creation (collapsible) */}
<details className="rounded-md border border-blue-200 bg-blue-50 px-3 py-3 dark:border-blue-900/50 dark:bg-blue-900/20">
<summary className="flex items-start gap-2 cursor-pointer list-none">
<Info className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
<p className="text-xs text-blue-700 dark:text-blue-300 font-medium">
Manual webhook creation (alternative: if the button below doesn't work)
</p>
</summary>
<div className="space-y-2 mt-2">
<p className="text-xs text-blue-600 dark:text-blue-400 pl-6">
Use the following curl command to create the {providerName} webhook manually with your
own credentials:
</p>
<div className="relative rounded-md bg-muted border pl-6">
<div className="absolute top-2 right-2">
<CopyButton text={curlCommand} />
</div>
<pre className="text-xs font-mono whitespace-pre-wrap break-all py-2 pr-16 overflow-x-auto">
{curlCommand}
</pre>
</div>
</div>
</details>

<div className="space-y-2">
<div className="flex items-center gap-2">
<button
Expand Down Expand Up @@ -210,28 +234,6 @@ export function WebhookStep({
</p>
)}
</div>

{/* curl instructions for manual webhook creation */}
<div className="rounded-md border border-blue-200 bg-blue-50 px-3 py-3 space-y-2 dark:border-blue-900/50 dark:bg-blue-900/20">
<div className="flex items-start gap-2">
<Info className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
<p className="text-xs text-blue-700 dark:text-blue-300 font-medium">
Manual webhook creation (if the button above doesn't work)
</p>
</div>
<p className="text-xs text-blue-600 dark:text-blue-400 pl-6">
Use the following curl command to create the {providerName} webhook manually with your own
credentials:
</p>
<div className="relative rounded-md bg-muted border pl-6">
<div className="absolute top-2 right-2">
<CopyButton text={curlCommand} />
</div>
<pre className="text-xs font-mono whitespace-pre-wrap break-all py-2 pr-16 overflow-x-auto">
{curlCommand}
</pre>
</div>
</div>
</div>
);
}
Expand Down
12 changes: 6 additions & 6 deletions web/src/components/projects/pm-wizard-trello-steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,12 @@ export function TrelloCredentialsStep({

return (
<div className="space-y-4">
{state.isEditing && state.hasStoredCredentials && !state.trelloApiKey && (
<div className="flex items-center gap-2 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
<CheckCircle2 className="h-4 w-4 shrink-0" />
Credentials stored — enter new values below to replace them.
</div>
)}
<p className="text-xs text-muted-foreground">
Enter your Trello API credentials. These will be saved securely to the project.
</p>
Expand All @@ -109,12 +115,6 @@ export function TrelloCredentialsStep({
</a>
</p>
</div>
{state.isEditing && state.hasStoredCredentials && !state.trelloApiKey && (
<div className="flex items-center gap-2 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700 dark:border-green-800 dark:bg-green-950 dark:text-green-400">
<CheckCircle2 className="h-4 w-4 shrink-0" />
Credentials stored — enter new values above to replace them.
</div>
)}
<div className="space-y-2">
<Label>Authorization</Label>
{state.trelloToken ? (
Expand Down
Loading