feat(toolbar): support feature flag payload overrides in the flag toolbar #28058
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR adds support for feature flag payload overrides in the toolbar, allowing users to customize feature flag behavior with JSON payloads directly from the UI.
Key changes:
- Added payload editor section in
FlagsToolbarMenu.tsxwith JSON validation and error handling - Implemented new
overrideFeatureFlagsmethod inflagsToolbarLogic.tsto handle both flag values and payloads - Updated state management to track payload overrides and draft payloads separately
- Modified code snippets to use new
overrideFeatureFlagsmethod instead of deprecatedoverride - Added visual feedback for payload validation errors in the toolbar UI
3 file(s) reviewed, 5 comment(s)
Edit PR Review Bot Settings | Greptile
| ? JSON.stringify(payloadOverride, null, 2) | ||
| : '') | ||
| } | ||
| onChange={(val) => setDraftPayload(feature_flag.key, val)} |
There was a problem hiding this comment.
style: Consider debouncing setDraftPayload to avoid excessive state updates during typing
| } | ||
| toolbarPosthogJS.capture('toolbar feature flag override removed') | ||
| actions.checkLocalOverrides() | ||
| clientPostHog.featureFlags.reloadFeatureFlags() | ||
| } | ||
| }, | ||
| savePayloadOverride: ({ flagKey }) => { | ||
| try { | ||
| const payload = JSON.parse(values.draftPayloads[flagKey] || '') |
There was a problem hiding this comment.
logic: Empty string JSON.parse() will throw - should check for truthy value before parsing
| const payload = JSON.parse(values.draftPayloads[flagKey] || '') | |
| const draftPayload = values.draftPayloads[flagKey] | |
| const payload = draftPayload ? JSON.parse(draftPayload) : null |
| const payloads = payloadOverride ? { [flagKey]: payloadOverride } : undefined | ||
| clientPostHog.featureFlags.overrideFeatureFlags( | ||
| { ...values.localOverrides, [flagKey]: overrideValue }, | ||
| { | ||
| payloads: payloads, | ||
| } |
There was a problem hiding this comment.
style: No validation of payloadOverride structure before passing to overrideFeatureFlags - could cause runtime errors if malformed
| const updatedFlags = { ...values.localOverrides } | ||
| delete updatedFlags[flagKey] | ||
| if (Object.keys(updatedFlags).length > 0) { | ||
| clientPostHog.featureFlags.override({ ...updatedFlags }) | ||
| clientPostHog.featureFlags.overrideFeatureFlags({ ...updatedFlags }) | ||
| } else { | ||
| clientPostHog.featureFlags.override(false) | ||
| clientPostHog.featureFlags.overrideFeatureFlags(false) | ||
| } |
There was a problem hiding this comment.
logic: State inconsistency possible - payloadOverrides state not cleared when feature flags are disabled
| setOverriddenUserFlag: (flagKey: string, overrideValue: string | boolean, payloadOverride?: any) => ({ | ||
| flagKey, | ||
| overrideValue, | ||
| payloadOverride, | ||
| }), |
There was a problem hiding this comment.
style: payloadOverride type should be more strictly defined than 'any' for type safety
📸 UI snapshots have been updated5 snapshot changes in total. 0 added, 5 modified, 0 deleted:
Triggered by this commit. |
…ub.com:PostHog/posthog into feat/support-payload-overrides-in-flag-toolbar
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
Context
NB: This change depends on PostHog/posthog-js#1697 for types and new functionality. Don't merge this until the posthog-js change goes in.
With that above posthog-js PR, I've added support for overriding feature flag payloads (along with the usual support for overriding feature flag values) via a new method,
overrideFeatureFlags. My changes here adds this override feature flag payload support to our toolbar.Changes
Loom: https://www.loom.com/share/6b59c95c98d74e61b50ac843134bedc8
Does this work well for both Cloud and self-hosted?
Yes
How did you test this code?
Manual UI testing.