mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-02 11:40:00 +00:00
[backport rh-test] change cloud feature flags to be loaded dynamically at runtime rather than set in build (#6257)
## Summary
Backport of #6246 to `rh-test` branch.
This PR cherry-picks commit d7a58a7a9b to
the `rh-test` branch with merge conflicts resolved.
### Conflicts Resolved
**GraphCanvas.vue:**
- Accepted incoming template structure changes (removed betaMenuEnabled
check, added workflow tabs)
- Added missing imports: TopbarBadges, WorkflowTabs, isNativeWindow
- Added showUI computed property
**cloudBadge.ts:**
- Deleted file (replaced by cloudBadges.ts plural)
**telemetry/types.ts:**
- Merged interface methods from both branches
- Accepted incoming event constant changes (app: prefix)
Original PR: #6246
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6257-backport-rh-test-change-cloud-feature-flags-to-be-loaded-dynamically-at-runtime-rather--2966d73d365081a59daeeb6dfbbf2af5)
by [Unito](https://www.unito.io)
This commit is contained in:
@@ -27,7 +27,7 @@ interface CloudSubscriptionStatusResponse {
|
||||
const subscriptionStatus = ref<CloudSubscriptionStatusResponse | null>(null)
|
||||
|
||||
const isActiveSubscription = computed(() => {
|
||||
if (!isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION) return true
|
||||
if (!isCloud || !window.__CONFIG__?.subscription_required) return true
|
||||
|
||||
return subscriptionStatus.value?.is_active ?? false
|
||||
})
|
||||
|
||||
44
src/platform/remoteConfig/remoteConfig.ts
Normal file
44
src/platform/remoteConfig/remoteConfig.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* Remote configuration service
|
||||
*
|
||||
* Fetches configuration from the server at runtime, enabling:
|
||||
* - Feature flags without rebuilding
|
||||
* - Server-side feature discovery
|
||||
* - Version compatibility management
|
||||
* - Avoiding vendor lock-in for native apps
|
||||
*
|
||||
* This module is tree-shaken in OSS builds.
|
||||
* Used for initial config load in main.ts and polling in the extension.
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
|
||||
import type { RemoteConfig } from './types'
|
||||
|
||||
/**
|
||||
* Reactive remote configuration
|
||||
* Updated whenever config is loaded from the server
|
||||
*/
|
||||
export const remoteConfig = ref<RemoteConfig>({})
|
||||
|
||||
/**
|
||||
* Loads remote configuration from the backend /api/features endpoint
|
||||
* and updates the reactive remoteConfig ref
|
||||
*/
|
||||
export async function loadRemoteConfig(): Promise<void> {
|
||||
try {
|
||||
const response = await fetch('/api/features', { cache: 'no-store' })
|
||||
if (response.ok) {
|
||||
const config = await response.json()
|
||||
window.__CONFIG__ = config
|
||||
remoteConfig.value = config
|
||||
} else {
|
||||
console.warn('Failed to load remote config:', response.statusText)
|
||||
window.__CONFIG__ = {}
|
||||
remoteConfig.value = {}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch remote config:', error)
|
||||
window.__CONFIG__ = {}
|
||||
remoteConfig.value = {}
|
||||
}
|
||||
}
|
||||
19
src/platform/remoteConfig/types.ts
Normal file
19
src/platform/remoteConfig/types.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* Server health alert configuration from the backend
|
||||
*/
|
||||
type ServerHealthAlert = {
|
||||
message: string
|
||||
tooltip?: string
|
||||
severity?: 'info' | 'warning' | 'error'
|
||||
badge?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Remote configuration type
|
||||
* Configuration fetched from the server at runtime
|
||||
*/
|
||||
export type RemoteConfig = {
|
||||
mixpanel_token?: string
|
||||
subscription_required?: boolean
|
||||
server_health_alert?: ServerHealthAlert
|
||||
}
|
||||
@@ -81,7 +81,7 @@ export function useSettingUI(
|
||||
}
|
||||
|
||||
const subscriptionPanel: SettingPanelItem | null =
|
||||
!isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION
|
||||
!isCloud || !window.__CONFIG__?.subscription_required
|
||||
? null
|
||||
: {
|
||||
node: {
|
||||
@@ -149,7 +149,9 @@ export function useSettingUI(
|
||||
keybindingPanel,
|
||||
extensionPanel,
|
||||
...(isElectron() ? [serverConfigPanel] : []),
|
||||
...(isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION && subscriptionPanel
|
||||
...(isCloud &&
|
||||
window.__CONFIG__?.subscription_required &&
|
||||
subscriptionPanel
|
||||
? [subscriptionPanel]
|
||||
: [])
|
||||
].filter((panel) => panel.component)
|
||||
@@ -185,12 +187,12 @@ export function useSettingUI(
|
||||
userPanel.node,
|
||||
...(isLoggedIn.value &&
|
||||
isCloud &&
|
||||
__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION &&
|
||||
window.__CONFIG__?.subscription_required &&
|
||||
subscriptionPanel
|
||||
? [subscriptionPanel.node]
|
||||
: []),
|
||||
...(isLoggedIn.value &&
|
||||
!(isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION)
|
||||
!(isCloud && window.__CONFIG__?.subscription_required)
|
||||
? [creditsPanel.node]
|
||||
: [])
|
||||
].map(translateCategory)
|
||||
|
||||
@@ -3,6 +3,8 @@ import type { OverridedMixpanel } from 'mixpanel-browser'
|
||||
import type {
|
||||
AuthMetadata,
|
||||
ExecutionContext,
|
||||
ExecutionErrorMetadata,
|
||||
ExecutionSuccessMetadata,
|
||||
RunButtonProperties,
|
||||
SurveyResponses,
|
||||
TelemetryEventName,
|
||||
@@ -46,7 +48,7 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
|
||||
private _composablesReady = false
|
||||
|
||||
constructor() {
|
||||
const token = __MIXPANEL_TOKEN__
|
||||
const token = window.__CONFIG__?.mixpanel_token
|
||||
|
||||
if (token) {
|
||||
try {
|
||||
@@ -76,7 +78,7 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
|
||||
this.isEnabled = false
|
||||
}
|
||||
} else {
|
||||
console.warn('Mixpanel token not provided')
|
||||
console.warn('Mixpanel token not provided in runtime config')
|
||||
this.isEnabled = false
|
||||
}
|
||||
}
|
||||
@@ -384,7 +386,7 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
|
||||
trackWorkflowExecution(): void {
|
||||
if (this.isOnboardingMode) {
|
||||
// During onboarding, track basic execution without workflow context
|
||||
this.trackEvent(TelemetryEvents.WORKFLOW_EXECUTION_STARTED, {
|
||||
this.trackEvent(TelemetryEvents.EXECUTION_START, {
|
||||
is_template: false,
|
||||
workflow_name: undefined
|
||||
})
|
||||
@@ -392,7 +394,15 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
|
||||
}
|
||||
|
||||
const context = this.getExecutionContext()
|
||||
this.trackEvent(TelemetryEvents.WORKFLOW_EXECUTION_STARTED, context)
|
||||
this.trackEvent(TelemetryEvents.EXECUTION_START, context)
|
||||
}
|
||||
|
||||
trackExecutionError(metadata: ExecutionErrorMetadata): void {
|
||||
this.trackEvent(TelemetryEvents.EXECUTION_ERROR, metadata)
|
||||
}
|
||||
|
||||
trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void {
|
||||
this.trackEvent(TelemetryEvents.EXECUTION_SUCCESS, metadata)
|
||||
}
|
||||
|
||||
getExecutionContext(): ExecutionContext {
|
||||
|
||||
@@ -59,6 +59,23 @@ export interface ExecutionContext {
|
||||
template_license?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Execution error metadata
|
||||
*/
|
||||
export interface ExecutionErrorMetadata {
|
||||
jobId: string
|
||||
nodeId?: string
|
||||
nodeType?: string
|
||||
error?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Execution success metadata
|
||||
*/
|
||||
export interface ExecutionSuccessMetadata {
|
||||
jobId: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Template metadata for workflow tracking
|
||||
*/
|
||||
@@ -95,6 +112,8 @@ export interface TelemetryProvider {
|
||||
|
||||
// Workflow execution events
|
||||
trackWorkflowExecution(): void
|
||||
trackExecutionError(metadata: ExecutionErrorMetadata): void
|
||||
trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void
|
||||
|
||||
// App lifecycle management
|
||||
markAppReady?(): void
|
||||
@@ -103,31 +122,37 @@ export interface TelemetryProvider {
|
||||
|
||||
/**
|
||||
* Telemetry event constants
|
||||
*
|
||||
* Event naming conventions:
|
||||
* - 'app:' prefix: UI/user interaction events
|
||||
* - No prefix: Backend/system events (execution lifecycle)
|
||||
*/
|
||||
export const TelemetryEvents = {
|
||||
// Authentication Flow
|
||||
USER_SIGN_UP_OPENED: 'user_sign_up_opened',
|
||||
USER_AUTH_COMPLETED: 'user_auth_completed',
|
||||
USER_SIGN_UP_OPENED: 'app:user_sign_up_opened',
|
||||
USER_AUTH_COMPLETED: 'app:user_auth_completed',
|
||||
|
||||
// Subscription Flow
|
||||
RUN_BUTTON_CLICKED: 'run_button_clicked',
|
||||
SUBSCRIPTION_REQUIRED_MODAL_OPENED: 'subscription_required_modal_opened',
|
||||
SUBSCRIBE_NOW_BUTTON_CLICKED: 'subscribe_now_button_clicked',
|
||||
RUN_BUTTON_CLICKED: 'app:run_button_click',
|
||||
SUBSCRIPTION_REQUIRED_MODAL_OPENED: 'app:subscription_required_modal_opened',
|
||||
SUBSCRIBE_NOW_BUTTON_CLICKED: 'app:subscribe_now_button_clicked',
|
||||
|
||||
// Onboarding Survey
|
||||
USER_SURVEY_OPENED: 'user_survey_opened',
|
||||
USER_SURVEY_SUBMITTED: 'user_survey_submitted',
|
||||
USER_SURVEY_OPENED: 'app:user_survey_opened',
|
||||
USER_SURVEY_SUBMITTED: 'app:user_survey_submitted',
|
||||
|
||||
// Email Verification
|
||||
USER_EMAIL_VERIFY_OPENED: 'user_email_verify_opened',
|
||||
USER_EMAIL_VERIFY_REQUESTED: 'user_email_verify_requested',
|
||||
USER_EMAIL_VERIFY_COMPLETED: 'user_email_verify_completed',
|
||||
USER_EMAIL_VERIFY_OPENED: 'app:user_email_verify_opened',
|
||||
USER_EMAIL_VERIFY_REQUESTED: 'app:user_email_verify_requested',
|
||||
USER_EMAIL_VERIFY_COMPLETED: 'app:user_email_verify_completed',
|
||||
|
||||
// Template Tracking
|
||||
TEMPLATE_WORKFLOW_OPENED: 'template_workflow_opened',
|
||||
TEMPLATE_WORKFLOW_OPENED: 'app:template_workflow_opened',
|
||||
|
||||
// Workflow Execution Tracking
|
||||
WORKFLOW_EXECUTION_STARTED: 'workflow_execution_started'
|
||||
// Execution Lifecycle
|
||||
EXECUTION_START: 'execution_start',
|
||||
EXECUTION_ERROR: 'execution_error',
|
||||
EXECUTION_SUCCESS: 'execution_success'
|
||||
} as const
|
||||
|
||||
export type TelemetryEventName =
|
||||
@@ -142,3 +167,5 @@ export type TelemetryEventProperties =
|
||||
| TemplateMetadata
|
||||
| ExecutionContext
|
||||
| RunButtonProperties
|
||||
| ExecutionErrorMetadata
|
||||
| ExecutionSuccessMetadata
|
||||
|
||||
Reference in New Issue
Block a user