refresh feature flags on auth or subscription state change #7197
Conversation
📝 WalkthroughWalkthroughAdds a debounced watcher that triggers remote configuration refresh when a user is logged in with an active subscription, while preserving existing 10-minute polling. Introduces a new async Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Watcher as Vue Watcher
participant RefreshFn as refreshRemoteConfig
participant API as /features Endpoint
participant Storage as Config Storage (window.__CONFIG__, remoteConfig.value)
User->>Watcher: Login / Activate subscription
rect rgba(100,180,200,0.15)
Note over Watcher: Debounce 256ms (immediate on setup)
end
Watcher->>Watcher: Detect isLoggedIn && isActiveSubscription
Watcher->>RefreshFn: Call refreshRemoteConfig()
rect rgba(120,200,150,0.12)
Note over RefreshFn: Fetch with cache: no-store
RefreshFn->>API: GET /features
end
alt Success (response.ok)
API-->>RefreshFn: Config JSON
RefreshFn->>Storage: Parse & update
RefreshFn->>Storage: window.__CONFIG__ = config
RefreshFn->>Storage: remoteConfig.value = config
else Non-OK Response
API-->>RefreshFn: Error status
RefreshFn->>RefreshFn: Log warning
RefreshFn->>Storage: Clear config (empty objects)
else Exception
RefreshFn->>RefreshFn: Log error
RefreshFn->>Storage: Clear config (empty objects)
end
✨ 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 |
dosubot
bot
added
the
size:M
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/06/2025, 02:04:13 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/06/2025, 02:12:34 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.2 MB (baseline 3.2 MB) • ⚪ 0 BMain entry bundles and manifests
Graph Workspace — 974 kB (baseline 974 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
UI Components — 174 kB (baseline 174 kB) • ⚪ 0 BReusable component library chunks
Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/extensions/core/cloudRemoteConfig.ts(2 hunks)src/platform/remoteConfig/refreshRemoteConfig.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/remoteConfig/refreshRemoteConfig.tssrc/extensions/core/cloudRemoteConfig.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/platform/remoteConfig/refreshRemoteConfig.tssrc/extensions/core/cloudRemoteConfig.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/remoteConfig/refreshRemoteConfig.tssrc/extensions/core/cloudRemoteConfig.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/remoteConfig/refreshRemoteConfig.tssrc/extensions/core/cloudRemoteConfig.ts
**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively; no new JavaScript code
Files:
src/platform/remoteConfig/refreshRemoteConfig.tssrc/extensions/core/cloudRemoteConfig.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,vue}: Use camelCase for variable and function names
Indent with 2 spaces (see.prettierrc)
Use single quotes for strings (see.prettierrc)
No trailing semicolons (see.prettierrc)
Maximum line width of 80 characters (see.prettierrc)
Sort and group imports by plugin (runpnpm formatbefore committing)
Never useanytype; use proper TypeScript types instead
Never useas anytype assertions; fix the underlying type issue instead
Avoid code comments unless absolutely necessary; write expressive, self-documenting code instead
When writing new code, ask if there is a simpler way to introduce the same functionality; if yes, choose the simpler approach
Use refactoring to make complex code simpler
Use es-toolkit for utility functions
Use Vite for fast development and building
Implement proper error handling
Write tests for all changes, especially bug fixes to catch future regressions
Files:
src/platform/remoteConfig/refreshRemoteConfig.tssrc/extensions/core/cloudRemoteConfig.ts
🧠 Learnings (10)
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
📚 Learning: 2025-12-06T00:52:35.733Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.733Z
Learning: Applies to **/*.vue : Use `computed` instead of a `ref` and `watch` if possible
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use watch and watchEffect for side effects
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
📚 Learning: 2025-12-06T00:52:35.733Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.733Z
Learning: Applies to **/*.vue : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition API
Applied to files:
src/extensions/core/cloudRemoteConfig.ts
🧬 Code graph analysis (2)
src/platform/remoteConfig/refreshRemoteConfig.ts (2)
src/scripts/api.ts (1)
api(1289-1289)src/platform/remoteConfig/remoteConfig.ts (1)
remoteConfig(22-22)
src/extensions/core/cloudRemoteConfig.ts (3)
src/composables/auth/useCurrentUser.ts (1)
useCurrentUser(12-149)src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)src/platform/remoteConfig/refreshRemoteConfig.ts (1)
refreshRemoteConfig(5-23)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (4)
src/platform/remoteConfig/refreshRemoteConfig.ts (2)
1-3: LGTM!Imports are clean and follow the project structure.
10-11: > Likely an incorrect or invalid review comment.src/extensions/core/cloudRemoteConfig.ts (2)
1-6: LGTM!The new imports are well-organized and follow the project's import patterns. Using VueUse's
watchDebouncedaligns with the coding guidelines.
20-27: Verify guard logic: should subscription status also be checked?The watcher observes both
isLoggedInandisActiveSubscription(line 21), but the guard (line 23) only checks login status. This meansrefreshRemoteConfigwill be called when subscription changes even if the subscription is inactive, as long as the user is logged in.Based on the AI summary stating the refresh should occur "when the user is logged in and the subscription is active," consider checking both conditions:
watchDebounced( [isLoggedIn, isActiveSubscription], () => { - if (!isLoggedIn.value) return + if (!isLoggedIn.value || !isActiveSubscription.value) return void refreshRemoteConfig() }, { debounce: 256, immediate: true } )However, if the intent is to refresh whenever either auth or subscription changes (regardless of subscription status), as suggested by the PR title "refresh feature flags on auth or subscription state change," then the current implementation is correct. Please confirm the intended behavior.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/platform/remoteConfig/refreshRemoteConfig.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/remoteConfig/refreshRemoteConfig.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/platform/remoteConfig/refreshRemoteConfig.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/remoteConfig/refreshRemoteConfig.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/remoteConfig/refreshRemoteConfig.ts
**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively; no new JavaScript code
Files:
src/platform/remoteConfig/refreshRemoteConfig.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,vue}: Use camelCase for variable and function names
Indent with 2 spaces (see.prettierrc)
Use single quotes for strings (see.prettierrc)
No trailing semicolons (see.prettierrc)
Maximum line width of 80 characters (see.prettierrc)
Sort and group imports by plugin (runpnpm formatbefore committing)
Never useanytype; use proper TypeScript types instead
Never useas anytype assertions; fix the underlying type issue instead
Avoid code comments unless absolutely necessary; write expressive, self-documenting code instead
When writing new code, ask if there is a simpler way to introduce the same functionality; if yes, choose the simpler approach
Use refactoring to make complex code simpler
Use es-toolkit for utility functions
Use Vite for fast development and building
Implement proper error handling
Write tests for all changes, especially bug fixes to catch future regressions
Files:
src/platform/remoteConfig/refreshRemoteConfig.ts
🧬 Code graph analysis (1)
src/platform/remoteConfig/refreshRemoteConfig.ts (2)
src/scripts/api.ts (1)
api(1289-1289)src/platform/remoteConfig/remoteConfig.ts (1)
remoteConfig(22-22)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: lint-and-format
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: collect
Adds watch on auth state that refreshes remote config. In future PR, the remote config system and feature flags should be consolidated and moved out of ComfyApi. Currently, we need feature flags before GraphView mounts, but also need to add auth headers after auth, which necessitates these parallel systems temporarily
┆Issue is synchronized with this Notion page by Unito