Repository navigation
Add toast notification for successful API key save - #294
sanskaraggarwal2025 wants to merge 1 commit into
Conversation
- Add toast import and handler in models.tsx - Add onSaveSuccess callback prop to provider components - Show success toast after API key is saved for OpenAI, Claude, and Gemini providers - Toast message: 'API key has been successfully saved'
Summary of ChangesHello @sanskaraggarwal2025, I'm Gemini Code Assist1! 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 significantly improves the user experience by adding clear and concise toast notifications for API key save operations. Users will now receive instant feedback, whether an API key is successfully stored or if an error occurs during the process, enhancing the overall responsiveness and usability of the application's provider settings. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe 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
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 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
|
📝 WalkthroughWalkthroughThe changes introduce an optional Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a toast notification for successful API key saves. The implementation works, but it can be simplified by centralizing the toast notification logic. Currently, it involves passing an onSaveSuccess callback through several component layers, which leads to prop drilling and code duplication of the notification message. My review includes suggestions to refactor this by handling the toast notification directly within the ProviderView component. This will make the code cleaner, more maintainable, and reduce redundancy.
| interface ClaudeProviderProps { | ||
| onApiKeyChange?: (key: string) => void; | ||
| onApiUrlChange?: (url: string) => void; | ||
| onSaveSuccess?: () => void; | ||
| } | ||
|
|
||
| export const ClaudeProvider = ({ onApiKeyChange, onApiUrlChange }: ClaudeProviderProps) => { | ||
| export const ClaudeProvider = ({ onApiKeyChange, onApiUrlChange, onSaveSuccess }: ClaudeProviderProps) => { | ||
| return ( | ||
| <ProviderView | ||
| providerName="claude" | ||
| displayName="Claude" | ||
| defaultApiUrl="https://api.anthropic.com/v1/messages" | ||
| onApiKeyChange={onApiKeyChange} | ||
| onApiUrlChange={onApiUrlChange} | ||
| onSaveSuccess={onSaveSuccess} | ||
| /> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
The onSaveSuccess prop is no longer needed. Please remove it from the props interface, the function signature, and the ProviderView component call.
interface ClaudeProviderProps {
onApiKeyChange?: (key: string) => void;
onApiUrlChange?: (url: string) => void;
}
export const ClaudeProvider = ({ onApiKeyChange, onApiUrlChange }: ClaudeProviderProps) => {
return (
<ProviderView
providerName="claude"
displayName="Claude"
defaultApiUrl="https://api.anthropic.com/v1/messages"
onApiKeyChange={onApiKeyChange}
onApiUrlChange={onApiUrlChange}
/>
);
};
| interface GeminiProviderProps { | ||
| onApiKeyChange?: (key: string) => void; | ||
| onApiUrlChange?: (url: string) => void; | ||
| onSaveSuccess?: () => void; | ||
| } | ||
|
|
||
| export const GeminiProvider = ({ onApiKeyChange, onApiUrlChange }: GeminiProviderProps) => { | ||
| export const GeminiProvider = ({ onApiKeyChange, onApiUrlChange, onSaveSuccess }: GeminiProviderProps) => { | ||
| return ( | ||
| <ProviderView | ||
| providerName="gemini" | ||
| displayName="Gemini" | ||
| defaultApiUrl="https://generativelanguage.googleapis.com/v1beta/openai/chat/completions" | ||
| onApiKeyChange={onApiKeyChange} | ||
| onApiUrlChange={onApiUrlChange} | ||
| onSaveSuccess={onSaveSuccess} | ||
| /> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
The onSaveSuccess prop is no longer needed. Please remove it from the props interface, the function signature, and the ProviderView component call.
interface GeminiProviderProps {
onApiKeyChange?: (key: string) => void;
onApiUrlChange?: (url: string) => void;
}
export const GeminiProvider = ({ onApiKeyChange, onApiUrlChange }: GeminiProviderProps) => {
return (
<ProviderView
providerName="gemini"
displayName="Gemini"
defaultApiUrl="https://generativelanguage.googleapis.com/v1beta/openai/chat/completions"
onApiKeyChange={onApiKeyChange}
onApiUrlChange={onApiUrlChange}
/>
);
};
| interface OpenaiProviderProps { | ||
| onApiKeyChange?: (key: string) => void; | ||
| onApiUrlChange?: (url: string) => void; | ||
| onSaveSuccess?: () => void; | ||
| } | ||
|
|
||
| export const OpenaiProvider = ({ onApiKeyChange, onApiUrlChange }: OpenaiProviderProps) => { | ||
| export const OpenaiProvider = ({ onApiKeyChange, onApiUrlChange, onSaveSuccess }: OpenaiProviderProps) => { | ||
| return ( | ||
| <ProviderView | ||
| providerName="openai" | ||
| displayName="OpenAI" | ||
| defaultApiUrl="https://api.openai.com/v1/chat/completions" | ||
| onApiKeyChange={onApiKeyChange} | ||
| onApiUrlChange={onApiUrlChange} | ||
| onSaveSuccess={onSaveSuccess} | ||
| /> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
The onSaveSuccess prop is no longer needed. Please remove it from the props interface, the function signature, and the ProviderView component call.
interface OpenaiProviderProps {
onApiKeyChange?: (key: string) => void;
onApiUrlChange?: (url: string) => void;
}
export const OpenaiProvider = ({ onApiKeyChange, onApiUrlChange }: OpenaiProviderProps) => {
return (
<ProviderView
providerName="openai"
displayName="OpenAI"
defaultApiUrl="https://api.openai.com/v1/chat/completions"
onApiKeyChange={onApiKeyChange}
onApiUrlChange={onApiUrlChange}
/>
);
};
| defaultApiUrl?: string; | ||
| onApiKeyChange?: (key: string) => void; | ||
| onApiUrlChange?: (url: string) => void; | ||
| onSaveSuccess?: () => void; |
There was a problem hiding this comment.
The onSaveSuccess prop is no longer needed in the props interface as part of the suggested refactoring.
| defaultApiUrl = '', | ||
| onApiKeyChange, | ||
| onApiUrlChange, | ||
| onSaveSuccess, |
There was a problem hiding this comment.
With the onSaveSuccess prop being removed, it should also be removed from the props destructuring.
| if (onSaveSuccess) { | ||
| onSaveSuccess(); | ||
| } else { | ||
| toast.success('API key has been successfully saved'); | ||
| } |
There was a problem hiding this comment.
This logic can be simplified by removing the conditional check for onSaveSuccess. The component can take full responsibility for showing the success notification.
toast.success('API key has been successfully saved');
| // Handler for successful API key save | ||
| const handleApiKeySaveSuccess = () => { | ||
| toast.success('API key has been successfully saved'); | ||
| }; |
There was a problem hiding this comment.
This handler function for showing a toast is redundant. The ProviderView component, which handles the save operation, is a better place to trigger this notification. Removing this and the related onSaveSuccess prop will simplify the code and avoid prop drilling. You can also remove the toast import on line 4 as it will no longer be used in this file after the refactoring.
| switch (selectedProvider) { | ||
| case 'openai': | ||
| return <OpenaiProvider />; | ||
| return <OpenaiProvider onSaveSuccess={handleApiKeySaveSuccess} />; | ||
| case 'claude': | ||
| return <ClaudeProvider />; | ||
| return <ClaudeProvider onSaveSuccess={handleApiKeySaveSuccess} />; | ||
| case 'gemini': | ||
| return <GeminiProvider />; | ||
| return <GeminiProvider onSaveSuccess={handleApiKeySaveSuccess} />; | ||
| case 'local': | ||
| return <LocalProvider />; | ||
| default: | ||
| return <ProviderView providerName={selectedProvider} />; | ||
| return <ProviderView providerName={selectedProvider} onSaveSuccess={handleApiKeySaveSuccess} />; | ||
| } |
There was a problem hiding this comment.
Following the suggestion to centralize the toast logic in ProviderView, the onSaveSuccess prop should be removed from these component calls.
| switch (selectedProvider) { | |
| case 'openai': | |
| return <OpenaiProvider />; | |
| return <OpenaiProvider onSaveSuccess={handleApiKeySaveSuccess} />; | |
| case 'claude': | |
| return <ClaudeProvider />; | |
| return <ClaudeProvider onSaveSuccess={handleApiKeySaveSuccess} />; | |
| case 'gemini': | |
| return <GeminiProvider />; | |
| return <GeminiProvider onSaveSuccess={handleApiKeySaveSuccess} />; | |
| case 'local': | |
| return <LocalProvider />; | |
| default: | |
| return <ProviderView providerName={selectedProvider} />; | |
| return <ProviderView providerName={selectedProvider} onSaveSuccess={handleApiKeySaveSuccess} />; | |
| } | |
| switch (selectedProvider) { | |
| case 'openai': | |
| return <OpenaiProvider />; | |
| case 'claude': | |
| return <ClaudeProvider />; | |
| case 'gemini': | |
| return <GeminiProvider />; | |
| case 'local': | |
| return <LocalProvider />; | |
| default: | |
| return <ProviderView providerName={selectedProvider} />; | |
| } |
This PR adds a toast notification that appears after users successfully save their API key for cloud providers (OpenAI, Gemini, Claude).
Changes
models.tsxonSaveSuccesscallback prop to provider components (OpenaiProvider, ClaudeProvider, GeminiProvider)ProviderViewto accept and call theonSaveSuccesscallbackTesting
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.