Skip to content

feat(guardrail): admin ui#113

Merged
bzp2010 merged 2 commits into
mainfrom
bzp/feat-guardrail-ui
May 19, 2026
Merged

feat(guardrail): admin ui#113
bzp2010 merged 2 commits into
mainfrom
bzp/feat-guardrail-ui

Conversation

@bzp2010
Copy link
Copy Markdown
Collaborator

@bzp2010 bzp2010 commented May 19, 2026

Summary by CodeRabbit

  • New Features

    • Added guardrails management UI: list, create, edit, and delete pages with bulk-delete support.
    • Two guardrail types supported: regex and Bedrock, each with dedicated configuration in the form.
    • Form validation, combined error banner, and secret-value visibility toggle for credential fields.
    • Guardrails entry added to the sidebar navigation.
  • Documentation

    • Internationalization added for English and Simplified Chinese (guardrails UI and form).

Review Change Stack

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 19, 2026

📝 Walkthrough

Walkthrough

This PR introduces a complete guardrails management feature to the admin UI. It adds type-safe contracts for regex and bedrock guardrails, CRUD API methods, React Query data hooks, a form component with conditional type-specific fields and validation, three routes for list/create/edit operations, and English/Chinese localization plus sidebar navigation integration.

Changes

Guardrails Management Feature

Layer / File(s) Summary
Type contracts and API client
crates/admin-ui/ui/src/lib/api/types.ts, crates/admin-ui/ui/src/lib/api/client.ts
Guardrail discriminated union separates regex and bedrock config shapes, and guardrailsApi object provides typed CRUD methods (list, get, create, update, delete) using shared request helper.
React Query hooks and query keys
crates/admin-ui/ui/src/lib/queries/guardrails.ts
Query key helpers and hooks for fetching guardrails list/detail with 401 auth modal handling; mutations for create/update/delete with automatic query invalidation on success.
GuardrailForm and field components
crates/admin-ui/ui/src/components/guardrails/guardrail-form.tsx
Form with TanStack form instance, type-driven conditional config fields (regex pattern vs bedrock credentials), validation/trimming of required/optional fields, error banner, and SecretInput toggle for password visibility.
Route tree generation
crates/admin-ui/ui/src/routeTree.gen.ts
Auto-generated TanStack Router tree adds /_layout/guardrails/, /_layout/guardrails/create, and /_layout/guardrails/$id routes with updated type mappings and module augmentations.
Guardrails list and management page
crates/admin-ui/ui/src/routes/_layout/guardrails/index.tsx
Fetches and displays guardrails in searchable data table with selectable rows, derives id/summary per row, supports per-row and bulk edit/delete actions, and provides localized config descriptions.
Guardrails create page
crates/admin-ui/ui/src/routes/_layout/guardrails/create.tsx
Create page with header, close button, and GuardrailForm wired to useCreateGuardrail mutation with post-success navigation to list.
Guardrails edit page
crates/admin-ui/ui/src/routes/_layout/guardrails/$id.tsx
Edit page fetches guardrail by id, displays loading/error states, initializes GuardrailForm with data, wires form submission to update mutation, and provides delete action with confirmation dialog and pending state handling.
Navigation and localization
crates/admin-ui/ui/src/components/layout/sidebar.tsx, crates/admin-ui/ui/src/i18n/locales/en.json, crates/admin-ui/ui/src/i18n/locales/zh-CN.json
Adds Shield icon to sidebar with guardrails nav entry; provides complete English and Simplified Chinese localization for guardrail types, CRUD labels, list/form fields, and config summaries.

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
E2e Test Quality Review ⚠️ Warning PR adds ~600 LOC of guardrail UI with ZERO E2E test coverage. Custom check requires E2E tests (blocking). No UI tests for GuardrailForm, routes, or workflows. Add E2E tests for: create guardrail (regex/bedrock), edit, delete (single/bulk), API error handling, form validation edge cases. Use Playwright or similar.
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat(guardrail): admin ui' accurately reflects the primary change—adding guardrail UI components to the admin interface with multiple new files and routes.
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.
Security Check ✅ Passed Security review complete: No vulnerabilities found. AWS credentials properly masked with SecretInput component, no logging/exposure, admin key authentication required for all operations.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch bzp/feat-guardrail-ui

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

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 5

🤖 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 `@crates/admin-ui/ui/src/components/guardrails/guardrail-form.tsx`:
- Around line 74-76: The form currently pre-populates and reveals persisted
secret_access_key (see the secret_access_key initial state and the
RevealableInput render), which exposes stored secrets; change the edit behavior
to be write-only by initializing secret_access_key to an empty string when
editing (keep required validation only when creating a new guardrail), update
the submit/serialize logic in the form handler (e.g., the submit function that
builds the payload) to include secret_access_key only if the user entered a
non-empty value, and ensure validation rules on secret_access_key apply on
create flows but not on unchanged edits; update any other places that mirror
this pattern (the other initializations at the indicated blocks) to follow the
same write-only approach.

In `@crates/admin-ui/ui/src/lib/api/types.ts`:
- Around line 49-69: The shared Guardrail model currently exposes secret fields
(access_key_id, secret_access_key, session_token) — split it into separate DTOs:
keep the existing BedrockGuardrailConfig but create BedrockGuardrailWrite
(including access_key_id, secret_access_key, session_token) used by
create/update flows and create BedrockGuardrailRead (omit or redact those
fields) used by list/get flows; then replace the union type Guardrail with two
public union types GuardrailWrite (regex | bedrock write) and GuardrailRead
(regex | bedrock read) so read paths never carry raw secrets, and
implement/redact serialization for any secret-bearing struct (e.g.,
BedrockGuardrailWrite) per project guidelines.

In `@crates/admin-ui/ui/src/lib/queries/guardrails.ts`:
- Around line 45-73: The three mutation hooks useCreateGuardrail,
useUpdateGuardrail and useDeleteGuardrail currently assume key! and lack 401
handling; update each to extract openModal from useAdminKey() alongside key and
add an onError handler that checks for ApiClientError with status 401 and calls
openModal() to trigger re-authentication (mirror the pattern used in
useGuardrails()/useGuardrail()); keep existing onSuccess invalidation logic and
ensure the mutationFn still calls guardrailsApi.create/update/delete with the
key.

In `@crates/admin-ui/ui/src/routes/_layout/guardrails/`$id.tsx:
- Around line 27-31: The handleDelete function currently calls
deleteGuardrail.mutateAsync(id) and immediately navigates away, which ignores
failures; wrap the delete call in a try/catch inside handleDelete, await
deleteGuardrail.mutateAsync(id) in the try, and only call navigate({ to:
'/guardrails' }) on success; in the catch block surface the error to the user
(e.g., via existing toast/notification mechanism or set a component error state)
and do not navigate so the user can retry — update references to handleDelete,
deleteGuardrail.mutateAsync, and navigate accordingly.

In `@crates/admin-ui/ui/src/routes/_layout/guardrails/index.tsx`:
- Around line 119-123: The delete calls (deleteGuardrail.mutate in the row
action and the bulk deletion flow) don't handle failures and a single rejection
can stop remaining deletions; change both to use the async API and explicit
error handling: replace deleteGuardrail.mutate(row.original.id) with an async
call to deleteGuardrail.mutateAsync(row.original.id) (or call mutate with an
onError/onSuccess callback) and surface errors via the existing UI feedback
(toast/error state); for the bulk flow, stop using a simple loop that aborts on
the first rejection and instead use Promise.allSettled over the array of ids (or
sequentially await mutateAsync in a try/catch while collecting failures) so each
id is attempted even if others fail, then report successes and failures to the
user and update selection/state accordingly.
🪄 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: b4599d4b-fc23-4bf7-86f0-3fb4379dd42b

📥 Commits

Reviewing files that changed from the base of the PR and between 227938f and d55dce3.

📒 Files selected for processing (11)
  • crates/admin-ui/ui/src/components/guardrails/guardrail-form.tsx
  • crates/admin-ui/ui/src/components/layout/sidebar.tsx
  • crates/admin-ui/ui/src/i18n/locales/en.json
  • crates/admin-ui/ui/src/i18n/locales/zh-CN.json
  • crates/admin-ui/ui/src/lib/api/client.ts
  • crates/admin-ui/ui/src/lib/api/types.ts
  • crates/admin-ui/ui/src/lib/queries/guardrails.ts
  • crates/admin-ui/ui/src/routeTree.gen.ts
  • crates/admin-ui/ui/src/routes/_layout/guardrails/$id.tsx
  • crates/admin-ui/ui/src/routes/_layout/guardrails/create.tsx
  • crates/admin-ui/ui/src/routes/_layout/guardrails/index.tsx

Comment thread crates/admin-ui/ui/src/components/guardrails/guardrail-form.tsx
Comment thread crates/admin-ui/ui/src/lib/api/types.ts
Comment thread crates/admin-ui/ui/src/lib/queries/guardrails.ts
Comment thread crates/admin-ui/ui/src/routes/_layout/guardrails/$id.tsx
Comment thread crates/admin-ui/ui/src/routes/_layout/guardrails/index.tsx
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 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 `@crates/admin-ui/ui/src/i18n/locales/zh-CN.json`:
- Line 8: The zh-CN locale values for newly added keys are left in English;
replace the English strings with proper Chinese translations for the keys
introduced (e.g., "guardrails", "regex", "version", "bedrockEndpointOverride"
and any adjacent keys added in the same diff), and ensure the same translation
policy is applied consistently across the other new keys in this locale block;
if a product term must remain untranslated, add a short comment or consistent
marker in the locale file to document the intentional exception so reviewers can
verify consistency.
🪄 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: a132de18-82e6-4e4b-90d0-86bc53b30e97

📥 Commits

Reviewing files that changed from the base of the PR and between d55dce3 and e2ee2f5.

📒 Files selected for processing (5)
  • crates/admin-ui/ui/src/i18n/locales/en.json
  • crates/admin-ui/ui/src/i18n/locales/zh-CN.json
  • crates/admin-ui/ui/src/lib/queries/guardrails.ts
  • crates/admin-ui/ui/src/routes/_layout/guardrails/$id.tsx
  • crates/admin-ui/ui/src/routes/_layout/guardrails/index.tsx
✅ Files skipped from review due to trivial changes (1)
  • crates/admin-ui/ui/src/i18n/locales/en.json
🚧 Files skipped from review as they are similar to previous changes (3)
  • crates/admin-ui/ui/src/routes/_layout/guardrails/$id.tsx
  • crates/admin-ui/ui/src/lib/queries/guardrails.ts
  • crates/admin-ui/ui/src/routes/_layout/guardrails/index.tsx

Comment thread crates/admin-ui/ui/src/i18n/locales/zh-CN.json
@bzp2010 bzp2010 merged commit 312869f into main May 19, 2026
3 checks passed
@bzp2010 bzp2010 deleted the bzp/feat-guardrail-ui branch May 19, 2026 02:53
@coderabbitai coderabbitai Bot mentioned this pull request May 19, 2026
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