refactor: Remove deprecated react api usage#2034
Conversation
github-actions
Bot
added
community
frontend
mfortman11
changed the title
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughThis PR migrates frontend UI components from ChangesReact component and context modernization
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
|
React Doctor found 1 new issue in 1 file · 1 warning · score 73 / 100 (Needs work) · 7 fixed · vs 1 warning
Reviewed by React Doctor for commit |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/app/knowledge/page.tsx (1)
794-800: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueRedundant invalidate + refetch for the same query keys.
invalidateQueriesdefaults torefetchType: "active", so it already refetches activesearch/listFilesqueries and its returned promise resolves only after those refetches settle. Pairing eachinvalidateQuerieswith arefetchQuerieson the same key is redundant. You can drop the explicitrefetchQueriescalls, or userefetchType: "none"on the invalidations if the intent is to invalidate-then-refetch explicitly.🤖 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 `@frontend/app/knowledge/page.tsx` around lines 794 - 800, The `Promise.all` block in `knowledge/page.tsx` is doing redundant cache work for the same `search` and `listFiles` keys: `queryClient.invalidateQueries` already triggers active refetches and waits for them, so the matching `refetchQueries` calls should be removed. Update the logic around `refreshTasks`, `invalidateQueries`, and `refetchQueries` so each query key is handled only once, or switch the invalidations to `refetchType: "none"` if you want to keep an explicit invalidate-then-refetch flow.
🤖 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 `@frontend/components/knowledge-dropdown.tsx`:
- Around line 246-257: The handling of `connectorsResult.connectors` in
`knowledge-dropdown.tsx` is missing the same null-safe guard used elsewhere,
which can throw when the `/api/connectors` payload omits `connectors`. Update
the `availableTypes` filter and the `connectorInfo` population loop to use
optional chaining on `connectorsResult.connectors` and its indexed entries,
matching the existing access pattern around the connector type checks. This
should be fixed in the logic that builds `availableTypes` and fills
`connectorInfo` so the dropdown degrades safely when connector data is absent.
---
Nitpick comments:
In `@frontend/app/knowledge/page.tsx`:
- Around line 794-800: The `Promise.all` block in `knowledge/page.tsx` is doing
redundant cache work for the same `search` and `listFiles` keys:
`queryClient.invalidateQueries` already triggers active refetches and waits for
them, so the matching `refetchQueries` calls should be removed. Update the logic
around `refreshTasks`, `invalidateQueries`, and `refetchQueries` so each query
key is handled only once, or switch the invalidations to `refetchType: "none"`
if you want to keep an explicit invalidate-then-refetch flow.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: c316934a-1011-4f2e-acca-7bffdfd696ca
📒 Files selected for processing (26)
frontend/app/chat/_components/chat-input.tsxfrontend/app/knowledge/page.tsxfrontend/components/dev-role-toggle.tsxfrontend/components/knowledge-dropdown.tsxfrontend/components/ui/accordion.tsxfrontend/components/ui/avatar.tsxfrontend/components/ui/banner.tsxfrontend/components/ui/button.tsxfrontend/components/ui/card.tsxfrontend/components/ui/command.tsxfrontend/components/ui/dialog.tsxfrontend/components/ui/dropdown-menu.tsxfrontend/components/ui/input.tsxfrontend/components/ui/popover.tsxfrontend/components/ui/scroll-area.tsxfrontend/components/ui/select.tsxfrontend/components/ui/separator.tsxfrontend/components/ui/slider.tsxfrontend/components/ui/switch.tsxfrontend/components/ui/tabs.tsxfrontend/components/ui/tooltip.tsxfrontend/contexts/auth-context.tsxfrontend/contexts/brand-context.tsxfrontend/contexts/chat-context.tsxfrontend/contexts/knowledge-filter-context.tsxfrontend/contexts/task-context.tsx
|
Don't sweat the on React-doctor comments we're focussing on one for now |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| // Fetch all filters once when dropdown opens | ||
| const { data: allFilters = [] } = useGetAllFiltersQuery({ | ||
| enabled: isFilterDropdownOpen, | ||
| export function ChatInput({ |
There was a problem hiding this comment.
React Doctor · react-doctor/no-giant-component (warning)
Component "ChatInput" is 591 lines long, which is hard to read & change. Split it into a few smaller components.
Fix → Pull each section into its own component so the parent is easier to read, test, and change.
2 participants
no-react19-deprecated-apis
useContext→use()(auth-context,brand-context,chat-context,knowledge-filter-context,task-context,banner)forwardRefwrappers,refis now a regular prop (accordion,avatar,button,card,command,dialog,dropdown-menu,input,popover,scroll-area,select,separator,slider,switch, tabs, tooltip)chat-input.tsxSummary by CodeRabbit
useapproach for consistent, modern state access.