feat: Google Drive auto-save and OAuth authentication error handling #434
Conversation
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
Implements auto-save functionality for Google Drive files: - Auto-saves after 30 seconds of project changes - Only saves files loaded from or saved to Google Drive - Prevents unnecessary saves during manual save operations OAuth authentication error handling: - Detects 401 errors and expired authentication tokens - Displays "Save directly" button in menu bar on auth errors - Automatically re-authenticates and saves when button is clicked Technical details: - Added componentDidUpdate to monitor projectChanged state - Implemented debounced auto-save with setTimeout - Enhanced error handling in handleSaveDirectlyToGoogleDrive - Added auth_error state to saveDirectStatus - Added internationalization for auth error messages Resolves #433 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed projectChanged flag management: - Reset to false after loading from Google Drive - Reset to false after successful direct save - Reduced auto-save interval to 5 seconds for debugging This ensures the auto-save timer is triggered correctly when the project is modified after loading or saving. Technical details: - Added setProjectUnchanged() import to both loader and saver HOCs - Called onSetProjectUnchanged() after successful operations - Added detailed debug logging for auto-save timing - Fixed lint errors in debug log conditions Related to #433 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Change auto-save interval from 5 seconds (debug) to 30 seconds (production) - Remove all debug console.log statements added during development - Keep essential error logging (log.warn, log.error, console.error) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
UI Improvements: - Display only "Save directly" button when auth expires - Show warning message as tooltip on hover (title attribute) - Remove redundant text message for cleaner UI Re-authentication: - User-initiated save: automatically re-authenticate and retry save - Auto-save: show auth error button only (no automatic OAuth dialog) - Prevents surprising users with unexpected OAuth popups Technical Details: - Add isUserInitiated parameter to handleSaveDirectlyToGoogleDrive - Use googleDriveAPI.requestAccessToken() for re-authentication - Regenerate project data after re-auth before retry save - Add handleSaveDirectlyToGoogleDrive method to MenuBar component 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add debug functionality to test authentication error handling: - Add simulateAuthErrorCount counter (default: 2) - First save attempt: throws 401 error (auto-save scenario) - Second save attempt: throws 401 error (user clicks button) - Third save attempt: normal save (after re-authentication) This allows testing the complete re-authentication flow without waiting for OAuth token expiration (1 hour). To disable: Set simulateAuthErrorCount = 0 in constructor 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Set simulateAuthErrorCount to 0 to disable debug functionality. Testing of re-authentication flow completed successfully. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…method Refactor duplicate code by creating performSaveToGoogleDrive method: - Consolidates project data generation - Consolidates Google Drive upload - Consolidates success state management - Reduces code duplication from 2 locations (lines 204-218, 237-250) Benefits: - Single source of truth for save logic - Easier to maintain and update - Improved code readability 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Display logic changes: - Show "Save directly" button when: * File is from Google Drive (isGoogleDriveFile) * AND project has changes (projectChanged) * AND not currently saving/saved - Show "Saving..." when status is 'saving' - Show "Saved" when status is 'saved' - Show nothing when: * Not a Google Drive file * OR no changes * OR during/after save Added props: - googleDriveFile: Full Google Drive file object - projectChanged: Track if project has unsaved changes This provides better UX by showing save button whenever there are changes, not just on auth errors. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
github-actions bot
pushed a commit
that referenced
this pull request
Dec 15, 2025
…e-drive-auto-save feat: Google Drive auto-save and OAuth authentication error handling
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
概要
Issue #433 で提案されたGoogleドライブの自動保存機能とOAuth認証エラーハンドリングを実装しました。
実装内容
1. Googleドライブ自動保存機能
プロジェクトに変更が加えられた後、30秒経過すると自動的にGoogleドライブに保存する機能を実装しました。
動作フロー
技術的詳細
componentDidUpdateでprojectChanged状態を監視し、変更時に30秒のタイマーをスケジュールcomponentWillUnmountでタイマーをクリーンアップgoogleDriveFile.isGoogleDriveFile === trueの場合のみ自動保存を実行2. OAuth認証エラーハンドリング
Google OAuthのアクセストークンは通常1時間で有効期限が切れます。自動保存中にトークンが期限切れになった場合の対応を実装しました。
動作フロー
技術的詳細
saveDirectStatusに'auth_error'状態を追加menu-bar.jsxに認証エラー時のButtonコンポーネントを追加src/locales/ja.jsに追加変更ファイル
src/containers/google-drive-saver-hoc.jsx:
componentDidUpdate,componentWillUnmount）の追加scheduleAutoSave,clearAutoSaveTimeout,tryToAutoSave）の追加src/components/menu-bar/menu-bar.jsx:
src/locales/ja.js:
gui.menuBar.saveDirectlyButton: "直ちに保存"gui.menuBar.authExpired: "認証が期限切れです。クリックして保存してください。"テスト結果
参考
project-saver-hoc.jsxの自動保存パターンを参考にしましたスクリーンショット
（実際の動作確認時に追加予定）
🤖 Generated with Claude Code