fix: provider list not refreshing after adding new provider

[NieiR]

Summary

• Fix provider list not refreshing after adding a new provider
• Move AddProviderDialog creation from Server Component to Client Component (ProviderManagerLoaderContent)
• Ensure useQueryClient() correctly accesses the QueryClient instance within QueryClientProvider

Root Cause

AddProviderDialog was previously created in Server Components (page.tsx) and passed as a slot prop. Due to React Server/Client Component boundary handling, useQueryClient() could not correctly access the same queryClient instance, causing invalidateQueries() calls to fail to trigger data refetch.

Changes

File	Change
provider-manager-loader.tsx	Create AddProviderDialog internally instead of receiving via prop
settings/providers/page.tsx	Remove addDialogSlot prop
dashboard/providers/page.tsx	Remove duplicate AddProviderDialog from Section.actions

Test plan

• Add a new provider on /settings/providers page
• Verify the provider list refreshes immediately after creation
• Add a new provider on /dashboard/providers page
• Verify the provider list refreshes immediately after creation
• Verify only one "Add Provider" button appears on each page

Greptile Summary

This PR fixes the provider list not refreshing after adding a new provider by correctly managing React Server/Client Component boundaries. The root cause was that AddProviderDialog was being instantiated in Server Components and passed as a prop, which broke the QueryClientProvider context needed for useQueryClient() to work correctly.

Changes Made:

• Moved AddProviderDialog instantiation from Server Components (page.tsx files) into the Client Component ProviderManagerLoaderContent, which is wrapped by QueryClientProvider
• Removed the addDialogSlot prop from ProviderManagerLoader since the dialog is now created internally
• Eliminated duplicate AddProviderDialog instantiation in /dashboard/providers, ensuring a single source of truth for dialog management
• The dialog can now correctly call queryClient.invalidateQueries() on successful provider creation, triggering the expected data refetch

All changes follow proper Next.js App Router patterns by keeping query client operations within the Client Component boundary where QueryClientProvider is available.

Confidence Score: 5/5

• This PR is safe to merge with high confidence - it correctly addresses the React Server/Client boundary issue without introducing any side effects or regressions.
• Score of 5 is justified because: (1) The changes are surgical and focused on fixing a specific bug - moving component instantiation to the correct context boundary; (2) All three files maintain backward compatibility - the public API of ProviderManagerLoader is simplified but functional; (3) The fix directly addresses the root cause - useQueryClient() can now access the same QueryClient instance within the provider boundary; (4) No new dependencies or complex logic was introduced; (5) The pattern aligns with React and Next.js best practices for handling Client Components within Server Components.
• No files require special attention - all changes are minimal, focused, and correct.

Important Files Changed

Filename	Overview
src/app/[locale]/settings/providers/_components/provider-manager-loader.tsx	Correctly moved AddProviderDialog instantiation from Server Components into this Client Component. Now the dialog is created inside QueryClientProvider, ensuring useQueryClient() has access to the correct context instance. Removed addDialogSlot prop and imports. This fixes the core issue where query invalidation wasn't working.
src/app/[locale]/settings/providers/page.tsx	Correctly removed the AddProviderDialog import and addDialogSlot prop from ProviderManagerLoader. This Server Component no longer needs to instantiate the dialog. Changes align with the fix to move dialog creation to the Client Component boundary.
src/app/[locale]/dashboard/providers/page.tsx	Correctly removed duplicate AddProviderDialog import and instantiation from Section.actions. The dialog is now consistently managed only by ProviderManagerLoader, preventing duplicate buttons and ensuring a single source of truth for dialog state and query invalidation.

Sequence Diagram

sequenceDiagram
    participant SC as Server Component<br/>(page.tsx)
    participant QCP as QueryClientProvider
    participant CC as ProviderManagerLoaderContent<br/>(Client Component)
    participant APD as AddProviderDialog<br/>(Client Component)
    participant QC as QueryClient

    rect rgb(200, 220, 255)
    Note over SC,QC: BEFORE FIX: AddProviderDialog created in Server Component
    SC->>SC: Create AddProviderDialog instance
    SC->>QCP: Pass addDialogSlot prop
    Note over APD: useQueryClient() fails - outside QueryClientProvider context
    end

    rect rgb(200, 255, 220)
    Note over SC,QC: AFTER FIX: AddProviderDialog created inside Client Component
    SC->>QCP: Render QueryClientProvider
    QCP->>CC: Render ProviderManagerLoaderContent
    CC->>APD: Create AddProviderDialog (inside QueryClientProvider context)
    APD->>QC: useQueryClient() now has access
    APD->>APD: onSuccess: invalidateQueries(['providers'])
    QC->>CC: Refetch data
    end

Loading

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

漫步

本次变更删除了 AddProviderDialog 组件在多个页面中的导入和使用，并调整了 ProviderManagerLoader 的属性接口，将 addDialogSlot 属性从可配置变更为内联固定实现。

变化

内聚体 / 文件	变更摘要
AddProviderDialog 移除 src/app/[locale]/dashboard/providers/page.tsx	删除 AddProviderDialog 导入，移除 Section 操作中的组件使用；ProviderManagerLoader 和 SchedulingRulesDialog 保持不变
接口属性调整 src/app/[locale]/settings/providers/_components/provider-manager-loader.tsx	从 ProviderManagerLoaderProps 移除 addDialogSlot 属性，改为内联 AddProviderDialog 实例；更新导入声明（移除 ReactNode）
属性使用移除 src/app/[locale]/settings/providers/page.tsx	删除 AddProviderDialog 导入，移除 ProviderManagerLoader 上的 addDialogSlot 属性调用

代码审查工作量估计

🎯 3 (Moderate) | ⏱️ ~20 分钟

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	标题清晰准确地总结了主要变更——修复了添加新供应商后提供商列表不刷新的问题，与代码更改内容完全相关。
Description check	✅ Passed	拉取请求的描述与更改集相关，清楚地解释了根本原因、具体的代码更改以及测试计划。

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[gemini-code-assist]

Summary of Changes

Hello @NieiR, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a critical bug where newly added providers were not immediately reflected in the provider list. The root cause was identified as AddProviderDialog being created in a Server Component, which prevented useQueryClient() from accessing the correct QueryClient instance for data refetching. The solution involves refactoring the AddProviderDialog component to be instantiated within a Client Component (ProviderManagerLoaderContent), thereby resolving the React Server/Client Component boundary issue and enabling proper data invalidation and UI refresh.

Highlights

• Provider List Refresh Fix: Resolved an issue where the provider list did not refresh immediately after a new provider was added.
• Component Relocation: Moved the AddProviderDialog component's creation from a Server Component (page.tsx) to a Client Component (ProviderManagerLoaderContent).
• Query Client Access: Ensured that useQueryClient() correctly accesses the QueryClient instance within the QueryClientProvider boundary, which was the root cause of the refresh failure.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request correctly addresses the issue of the provider list not refreshing by moving the AddProviderDialog instantiation into a client component that is a child of QueryClientProvider. This ensures it can access the correct QueryClient context. The changes are logical and well-explained. The removal of a duplicate 'Add Provider' button also cleans up the UI.

I have one critical piece of feedback regarding the instantiation of QueryClient in provider-manager-loader.tsx. It's currently created at the module level, which can lead to data leakage between users during server-side rendering. I've left a detailed comment with a suggested fix to align with React Query's best practices for Next.js.

[github-actions]

Code Review Summary

No significant issues identified in this PR. The fix correctly moves AddProviderDialog instantiation from Server Components into the Client Component (ProviderManagerLoaderContent) where the QueryClientProvider context is available. This ensures useQueryClient() can properly access the QueryClient instance for invalidateQueries() to work correctly.

PR Size: XS

• Lines changed: 10 (2 additions, 8 deletions)
• Files changed: 3

Technical Assessment

The root cause analysis in the PR description is accurate: when AddProviderDialog was instantiated in Server Components and passed as a slot prop, the component tree boundary prevented useQueryClient() from accessing the QueryClient instance created in ProviderManagerLoader. By moving the instantiation inside ProviderManagerLoaderContent (which is wrapped by QueryClientProvider), the hook can now correctly access the context.

Review Coverage

• Logic and correctness - Clean
• Security (OWASP Top 10) - Clean
• Error handling - Clean
• Type safety - Clean
• Documentation accuracy - N/A (no doc changes)
• Test coverage - Adequate (manual test plan provided)
• Code clarity - Good

---

Automated review by Claude AI