Gate UI features

Ensure UI elements (buttons, icons, tooltips, overlays) are only registered or rendered when the corresponding configuration or feature flag is enabled. Also ensure feature flags are passed into components or a central store so components make rendering decisions from configuration rather than hard-coded assumptions.

copy reviewer prompt

Prompt

Reviewer Prompt
Deploy Agent

Ensure UI elements (buttons, icons, tooltips, overlays) are only registered or rendered when the corresponding configuration or feature flag is enabled. Also ensure feature flags are passed into components or a central store so components make rendering decisions from configuration rather than hard-coded assumptions.

Motivation

  • Prevents exposing unavailable features, avoids UI clutter, and keeps behavior predictable across environments.
  • Matches existing patterns where flags are passed from top-level props into stores/components.

How to apply

  1. Propagate flags: accept feature flags as props at top-level components and pass them into your UI components or into the app/store. Example pattern (top-level): // LikeC4Diagram.tsx (pattern reference) <LikeC4Diagram enableSearch={enableSearch} />

  2. Gate registration: only add buttons/actions to arrays when the flag is true. Example: const buttons = [] if (flags.enableVscode) { buttons.push({ id: ‘open-in-vscode’, label: ‘Open in VSCode’, onClick: () => { /* … */ }, }) }

  3. Gate rendering: only render optional UI elements in JSX when the flag is true or derived from the store/props. Example:

    {flags.enableSearch && ( /* icon */ )}

Notes

  • Prefer a single source of truth for flags (props -> context/store) to avoid mismatches.
  • Keep gating logic simple and colocated with the registration or render site so it’s obvious why an element may be absent.
  • Include tests or story variants for both enabled and disabled states to prevent regressions.

Source discussions