Skip to content

feat: add webhook edit UI and signing secret status indicator#6027

Open
YigesMx wants to merge 3 commits into
usememos:mainfrom
YigesMx:feat/webhook-edit-ui
Open

feat: add webhook edit UI and signing secret status indicator#6027
YigesMx wants to merge 3 commits into
usememos:mainfrom
YigesMx:feat/webhook-edit-ui

Conversation

@YigesMx

@YigesMx YigesMx commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Follow-up to #6013.

What this does

  • Adds an edit button to each webhook row so you can update the URL and display name after creation.
  • Shows a signing secret status indicator (Configured / Not configured) so you can tell at a glance whether a webhook has a secret set.
  • Replaces the manual secret input with a Generate & Copy button and a Clear button. Secrets are now always system-generated (32 random bytes, whsec_ prefix) to guarantee they meet the Standard Webhooks 24–64 byte requirement.
  • A "Pending" label below the buttons tells you what will happen on save — no changes, cleared, or new secret.

Why

Per Standard Webhooks, signing secrets should be 24–64 random bytes. Letting users type arbitrary strings would allow invalid secrets to be persisted. System-generated secrets also match the spec's whsec_<base64> serialization convention and work correctly with Standard Webhooks verification libraries.

The edit button was missing entirely — once created, a webhook's URL and name could not be changed without deleting and recreating it.

Technical notes

  • has_signing_secret (OUTPUT_ONLY boolean) added to the UserWebhook proto so the frontend knows whether a secret exists without ever seeing it.
  • Three-state mask logic handles edit: undefined = don't update, "" = clear, non-empty = set new secret.
  • All buttons have aria-label attributes for accessibility.

@YigesMx YigesMx requested a review from a team as a code owner June 9, 2026 17:10
@coderabbitai

coderabbitai Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e5479f84-640a-4ae2-9187-4c437c4de187

📥 Commits

Reviewing files that changed from the base of the PR and between 1bb68b2 and a8636ff.

📒 Files selected for processing (1)
  • server/router/api/v1/user_service.go
🚧 Files skipped from review as they are similar to previous changes (1)
  • server/router/api/v1/user_service.go

📝 Walkthrough

Walkthrough

This PR adds webhook signing secret management across the API contract, backend implementation, and frontend UI. It defines a new has_signing_secret output-only field in the UserWebhook proto message, implements backend logic to populate it, refactors the webhook creation dialog to separately track existing versus newly generated signing secrets, enables editing existing webhooks, and adds localized UI strings for the signing secret workflow.

Changes

Webhook Signing Secret Management

Layer / File(s) Summary
Proto schema and backend webhook API
proto/api/v1/user_service.proto, server/router/api/v1/user_service.go, server/router/api/v1/user_webhook_test.go, web/src/types/proto/api/v1/user_service_pb.ts
Proto schema adds has_signing_secret output-only boolean field. Backend convertUserWebhookFromUserSetting and convertUserSettingFromStore populate this field based on whether the stored signing secret is non-empty. Backend test asserts the field is set while the signing secret value remains omitted. Generated TypeScript types reflect the schema update.
CreateWebhookDialog state and UI
web/src/components/CreateWebhookDialog.tsx
Dialog introduces hasExistingSecret state initialized from server data when editing and reset for create mode. Adds handleGenerateAndCopy, handleClearSecret, and getPendingLabel. Replaces the password input with a status line, generate-and-copy and clear buttons (trash icon), and conditional primary button text ("Create" vs "Save").
Webhook list editing support and dialog wiring
web/src/components/Settings/WebhookSection.tsx
Parent component adds editingWebhookName state and handlers, adds an edit (pencil) button per webhook row, and rewires CreateWebhookDialog open/onSuccess to support edit flow and refresh the list on success.
Localization for signing secret UI
web/src/locales/en.json, web/src/locales/zh-Hans.json
English and Simplified Chinese locale strings updated for the signing-secret workflow: new action labels (clear, generate-and-copy, copied) and detailed signing-secret status messages (configured, not configured, pending, cleared, generated, no changes).

Suggested reviewers

  • boojack
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat: add webhook edit UI and signing secret status indicator' directly and clearly summarizes the main changes: adding edit functionality and a status indicator for webhook signing secrets.
Description check ✅ Passed The description thoroughly explains what the PR does, why it's needed, and technical implementation details; it is clearly related to all major changes in the changeset including edit buttons, signing secret status, and backend updates.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@server/router/api/v1/user_service.go`:
- Around line 1274-1277: The UserWebhook response builders are inconsistent: add
the HasSigningSecret field in the webhook mapping inside
convertUserSettingFromStore so it matches the other builder that sets
HasSigningSecret; specifically, in convertUserSettingFromStore where you
construct the UserWebhook (or equivalent struct) add HasSigningSecret:
webhook.SigningSecret != "" (or the boolean expression used elsewhere) and
ensure the field name matches the struct field (HasSigningSecret /
has_signing_secret) so both endpoints return the same secret-status value.

In `@web/src/components/CreateWebhookDialog.tsx`:
- Around line 109-117: getPendingLabel currently treats an empty signingSecret
("") as "cleared", which incorrectly shows a pending clear for brand-new
webhooks; update getPendingLabel (and any caller logic in CreateWebhookDialog)
to first detect create mode (e.g., mode === 'create' or an isCreate/isEditing
flag used by this component) and, when in create mode, treat state.signingSecret
=== "" the same as undefined (return the "no changes" label); keep the existing
"cleared" semantics only when not in create/edit mode.

In `@web/src/components/Settings/WebhookSection.tsx`:
- Around line 102-109: The icon-only action buttons for edit/delete lack
accessible names; update the Button components that render the PencilIcon and
TrashIcon (the ones invoking handleEditWebhook(webhook) and
handleDeleteWebhook(webhook)) to provide an accessible name—e.g., add
aria-label="Edit webhook" and aria-label="Delete webhook" (or use
aria-labelledby/hidden visually-readable text for i18n) so assistive tech can
identify each action while keeping the icon-only visual design.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7f631b0d-ebe6-4e67-bbf5-5f8993bd268a

📥 Commits

Reviewing files that changed from the base of the PR and between 8080bd1 and 258a05e.

⛔ Files ignored due to path filters (2)
  • proto/gen/api/v1/user_service.pb.go is excluded by !**/*.pb.go, !**/gen/**
  • proto/gen/openapi.yaml is excluded by !**/gen/**
📒 Files selected for processing (8)
  • proto/api/v1/user_service.proto
  • server/router/api/v1/user_service.go
  • server/router/api/v1/user_webhook_test.go
  • web/src/components/CreateWebhookDialog.tsx
  • web/src/components/Settings/WebhookSection.tsx
  • web/src/locales/en.json
  • web/src/locales/zh-Hans.json
  • web/src/types/proto/api/v1/user_service_pb.ts

Comment thread server/router/api/v1/user_service.go Outdated
Comment thread web/src/components/CreateWebhookDialog.tsx
Comment thread web/src/components/Settings/WebhookSection.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant