feat(policy): admin ui

[bzp2010]

Summary by CodeRabbit

• New Features
  • Added Policies management: list, create, edit, delete (single and bulk)
  • Policy form: name, priority, condition, guardrail-backed actions with stage selection and validation
  • Navigation: new Policies item in sidebar
• Localization
  • Added English and Chinese UI text for Policies and guardrail-related labels

[coderabbitai]

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: 71f8afe3-3aa2-4919-843c-f0515bc12648

📥 Commits

Reviewing files that changed from the base of the PR and between d6930b7 and d7e4393.

📒 Files selected for processing (2)

• crates/admin-ui/ui/src/lib/api/client.ts
• crates/admin-ui/ui/src/lib/queries/policies.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• crates/admin-ui/ui/src/lib/api/client.ts
• crates/admin-ui/ui/src/lib/queries/policies.ts

---

📝 Walkthrough

Walkthrough

This PR adds a policies management feature to the admin UI: types and API client, React Query hooks, a validated PolicyForm, list/create/edit pages with bulk delete, route tree entries, a sidebar link, and English/Chinese translations.

Changes

Policies Management Feature

Layer / File(s)	Summary
Policy types and API client crates/admin-ui/ui/src/lib/api/types.ts, crates/admin-ui/ui/src/lib/api/client.ts	Exports policy model types (Policy, PolicyAction, PolicyStage, POLICY_STAGE_VARIANTS) and adds policiesApi with list, get, create, update, delete endpoints.
Data fetching and React Query hooks crates/admin-ui/ui/src/lib/queries/policies.ts	Adds policyKeys and hooks (usePolicies, usePolicy, useCreatePolicy, useUpdatePolicy, useDeletePolicy) with admin-key gating, 401 modal handling, and query invalidation on mutations.
PolicyForm component with validation crates/admin-ui/ui/src/components/policies/policy-form.tsx	New PolicyForm component and PolicyFormProps managing name/enabled/priority/when and dynamic guardrail-based actions; fetches guardrails, validates client-side, and normalizes payload on submit.
Policies list, create, and edit pages crates/admin-ui/ui/src/routes/_layout/policies/index.tsx, crates/admin-ui/ui/src/routes/_layout/policies/create.tsx, crates/admin-ui/ui/src/routes/_layout/policies/$id.tsx	Index: DataTable with search, selection, and bulk delete; Create: PolicyForm wired to create mutation and redirect; Edit: fetches policy, updates or deletes via PolicyForm with confirmation and navigation.
Route tree and type definitions crates/admin-ui/ui/src/routeTree.gen.ts	Generated TanStack Router entries and type mappings for /policies, /policies/create, and /policies/$id.
Sidebar navigation and UI translations 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 a /policies link with Scale icon and adds English and Chinese localization keys for the policies UI (labels, stages, form prompts, table columns, and status text).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• api7/aisix#112: Backend policies/guardrails work that pairs with the frontend policies CRUD and stage-based guardrail selection.
• api7/aisix#113: Guardrails feature and hooks (useGuardrails) used by the new PolicyForm component.

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
E2e Test Quality Review	⚠️ Warning	PR adds 541+ lines of UI code (PolicyForm, routes, hooks) with ZERO UI-level E2E tests. Backend API tests exist but don't cover frontend. SPA routes test not updated for /ui/policies paths.	Add E2E tests: 1) Update ui.test.ts with /ui/policies routes. 2) Add browser/integration tests for PolicyForm. 3) Test React Query hooks. 4) Test full user workflows via UI (create/edit/delete policies).

✅ 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 accurately summarizes the main change: adding policy management features to the admin UI interface.
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	No vulnerabilities found. Authorization enforced via bearer token middleware, no credential logging, error messages controlled, no sensitive data in types or i18n.

_{✏️ 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-policy-ui

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 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/lib/api/client.ts`:
- Around line 134-144: The get/update/delete methods in the client API embed raw
policy IDs into endpoint paths (see get, update, delete calling request with
`/policies/${id}`), which breaks for IDs with "/", "?", "#", or spaces; update
those callsites to URL-encode the id (e.g. use encodeURIComponent(id)) when
constructing the path passed to request so the requests target the correct
resource for all valid ID characters.

In `@crates/admin-ui/ui/src/lib/queries/policies.ts`:
- Around line 49-80: The mutation functions in useUpdatePolicy and
useDeletePolicy must guard against a missing admin key like the create mutation
does: inside each mutationFn (in useUpdatePolicy and useDeletePolicy) check that
key from useAdminKey is present before calling policiesApi.update or
policiesApi.delete, and if key is undefined immediately reject/throw a
descriptive error (or return Promise.reject) instead of calling the API with
key!, so malformed auth calls are prevented; update both mutationFn
implementations (and any other mutations using key) to follow this pattern.

🪄 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: 50b3d55d-a088-49f8-a8ed-c4577eff9040

📥 Commits

Reviewing files that changed from the base of the PR and between 312869f and d6930b7.

📒 Files selected for processing (11)

• crates/admin-ui/ui/src/components/layout/sidebar.tsx
• crates/admin-ui/ui/src/components/policies/policy-form.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/policies.ts
• crates/admin-ui/ui/src/routeTree.gen.ts
• crates/admin-ui/ui/src/routes/_layout/policies/$id.tsx
• crates/admin-ui/ui/src/routes/_layout/policies/create.tsx
• crates/admin-ui/ui/src/routes/_layout/policies/index.tsx