fix: handle paginated API key search response#5014
Open
yyhhyyyyyy wants to merge 2 commits into
Open
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughAdds a debounced, URL-synced token filter to the API Keys table; updates ChangesAPI Keys Search and Token Filter
Sequence Diagram(s)sequenceDiagram
participant User
participant ApiKeysTable
participant ReactQuery
participant ApiService
User->>ApiKeysTable: Type keyword or token
ApiKeysTable->>ApiKeysTable: Debounce token input
ApiKeysTable->>ApiKeysTable: Update URL _tokenSearch
ApiKeysTable->>ReactQuery: Fetch (queryKey includes keyword, token)
ReactQuery->>ApiService: Call searchApiKeys(keyword, token) or getApiKeys()
ApiService-->>ReactQuery: Return { items, total, page, page_size }
ReactQuery-->>ApiKeysTable: Provide data.items and data.total
ApiKeysTable->>ApiKeysTable: Render rows and pagination
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
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 `@web/default/src/features/keys/components/api-keys-table.tsx`:
- Around line 213-216: Remove the sensitive "_tokenSearch" entry from the
URL-synced columnFilters and stop persisting it to route/query params; instead
keep the token search value in local component state within the ApiKeysTable
component and pass that local value into the data-fetch/query function (where
columnFilters or searchKey 'token' is consumed) so filtering still works without
writing the token to the URL or router state; search the file for
"_tokenSearch", the columnFilters array and any code that syncs column state to
query params and remove/replace those URL syncs so only non-sensitive filters
remain in columnFilters.
- Around line 336-341: The token filter Input (value={tokenFilterInput},
onChange={e => setTokenFilterInput(e.target.value)}) lacks an accessible name;
add either a visible <label> associated with this input or provide an aria-label
(e.g., aria-label="Filter API keys") on the Input component so screen readers
can identify it, and ensure the label text is localized via t(...) if
applicable.
🪄 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: d90d54c3-cccb-4747-8761-29aed9478955
📒 Files selected for processing (9)
web/default/src/features/keys/api.tsweb/default/src/features/keys/components/api-keys-table.tsxweb/default/src/i18n/locales/en.jsonweb/default/src/i18n/locales/fr.jsonweb/default/src/i18n/locales/ja.jsonweb/default/src/i18n/locales/ru.jsonweb/default/src/i18n/locales/vi.jsonweb/default/src/i18n/locales/zh.jsonweb/default/src/routes/_authenticated/keys/index.tsx
Comment on lines
+213
to
+216
| columnFilters: [ | ||
| { columnId: 'status', searchKey: 'status', type: 'array' }, | ||
| { columnId: '_tokenSearch', searchKey: 'token', type: 'string' }, | ||
| ], |
Contributor
There was a problem hiding this comment.
Avoid persisting API key token filters in URL state.
Syncing _tokenSearch to URL query params can leak sensitive API key fragments via browser history, shared links, and referrer logs. Keep token search input in local component state only, and pass it to the query function without route synchronization.
Suggested change
columnFilters: [
{ columnId: 'status', searchKey: 'status', type: 'array' },
- { columnId: '_tokenSearch', searchKey: 'token', type: 'string' },
],
- const tokenFilterFromUrl =
- (columnFilters.find((f) => f.id === '_tokenSearch')?.value as string) || ''
- const [tokenFilterInput, setTokenFilterInput] = useState(tokenFilterFromUrl)
+ const [tokenFilterInput, setTokenFilterInput] = useState('')
const debouncedTokenFilter = useDebounce(tokenFilterInput, 500)
- useEffect(() => {
- setTokenFilterInput(tokenFilterFromUrl)
- }, [tokenFilterFromUrl])
-
- useEffect(() => {
- if (debouncedTokenFilter !== tokenFilterFromUrl) {
- onColumnFiltersChange((prev) => {
- const filtered = prev.filter((f) => f.id !== '_tokenSearch')
- return debouncedTokenFilter
- ? [...filtered, { id: '_tokenSearch', value: debouncedTokenFilter }]
- : filtered
- })
- }
- }, [debouncedTokenFilter, tokenFilterFromUrl, onColumnFiltersChange])
-
- const tokenFilter = tokenFilterFromUrl
+ const tokenFilter = debouncedTokenFilter.trim()As per coding guidelines, "do not store sensitive information in frontend".
Also applies to: 219-237
🤖 Prompt for 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.
In `@web/default/src/features/keys/components/api-keys-table.tsx` around lines 213
- 216, Remove the sensitive "_tokenSearch" entry from the URL-synced
columnFilters and stop persisting it to route/query params; instead keep the
token search value in local component state within the ApiKeysTable component
and pass that local value into the data-fetch/query function (where
columnFilters or searchKey 'token' is consumed) so filtering still works without
writing the token to the URL or router state; search the file for
"_tokenSearch", the columnFilters array and any code that syncs column state to
query params and remove/replace those URL syncs so only non-sensitive filters
remain in columnFilters.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Important
📝 变更描述 / Description
(简述：做了什么？为什么这样改能生效？请基于你对代码逻辑的理解来写，避免粘贴未经整理的内容)
修复default 前端 API Key 搜索结果解析逻辑。/api/token/search 返回的是分页结构 data.items / data.total，之前按数组读取data，导致搜索后列表为空或分页异常。现在搜索接口类型与列表接口保持一致，并统一从分页字段读取数据和总数。
同时将名称搜索与密钥搜索交给后端处理，避免前端再用已脱敏的 key 做二次过滤，从而保证按真实 API Key 搜索时后端命中的结果能正常展示。
🚀 变更类型 / Type of change
🔗 关联任务 / Related Issue
✅ 提交前检查项 / Checklist
Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。📸 运行证明 / Proof of Work
(请在此粘贴截图、关键日志或测试报告，以证明变更生效)
Summary by CodeRabbit
New Features
Improvements