{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "feature-flags-manager", "title": "Feature Flags Manager", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/feature-flags-manager/feature-flags-manager.component.ts", "content": "// Feature flags management dashboard: header with create button, KPI metric cards, a search +\n// status filter toolbar, and a flag table with master switches, rollout progress, targeting\n// rules, environment badges and a per-row actions menu. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Check,\n Copy,\n Flag,\n History,\n LucideAngularModule,\n MoreHorizontal,\n Plus,\n Search,\n ShieldAlert,\n Sliders,\n SlidersHorizontal,\n Trash2,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface EnvironmentState {\n production: boolean\n staging: boolean\n development: boolean\n}\n\nexport interface FeatureFlag {\n id: string\n name: string\n key: string\n description: string\n tags: string[]\n enabled: boolean\n rollout: number\n targetingRules: string\n environments: EnvironmentState\n evaluationCount?: string\n lastUpdated?: string\n}\n\nexport type FeatureFlagStatusFilter = 'all' | 'enabled' | 'disabled'\n\nexport const defaultFlags: FeatureFlag[] = [\n {\n id: 'ff-1',\n name: 'New Checkout Experience',\n key: 'new-checkout-v2',\n description: 'Modern multi-step checkout flow with one-click payment options.',\n tags: ['Frontend', 'Beta', 'Core'],\n enabled: true,\n rollout: 50,\n targetingRules: \"plan === 'enterprise' && country === 'US'\",\n environments: { production: true, staging: true, development: false },\n evaluationCount: '1.8M/day',\n lastUpdated: '10 min ago',\n },\n {\n id: 'ff-2',\n name: 'Dark Mode V2 Beta',\n key: 'dark-mode-beta',\n description: 'High-contrast OKLCH dark palette with custom system theme sync.',\n tags: ['Frontend', 'Beta'],\n enabled: true,\n rollout: 100,\n targetingRules: 'beta_tester === true',\n environments: { production: true, staging: true, development: true },\n evaluationCount: '920K/day',\n lastUpdated: '2 hours ago',\n },\n {\n id: 'ff-3',\n name: 'AI Auto Complete',\n key: 'ai-auto-complete',\n description: 'LLM-assisted syntax suggestion and context-aware auto-completion.',\n tags: ['AI', 'Core', 'Beta'],\n enabled: true,\n rollout: 25,\n targetingRules: \"org_tier IN ['growth', 'enterprise']\",\n environments: { production: true, staging: true, development: false },\n evaluationCount: '640K/day',\n lastUpdated: '1 day ago',\n },\n {\n id: 'ff-4',\n name: 'GraphQL API v2 Gateway',\n key: 'graphql-api-v2',\n description: 'High-throughput GraphQL federation engine replacing legacy REST proxy.',\n tags: ['Backend', 'Core'],\n enabled: false,\n rollout: 0,\n targetingRules: 'internal_team === true',\n environments: { production: false, staging: true, development: true },\n evaluationCount: '480K/day',\n lastUpdated: '3 days ago',\n },\n {\n id: 'ff-5',\n name: 'Crypto Payments Pilot',\n key: 'crypto-payments',\n description: 'USDC and Ethereum settlement rail for international enterprise invoices.',\n tags: ['Core', 'Beta'],\n enabled: false,\n rollout: 10,\n targetingRules: \"country IN ['US', 'DE', 'SG'] && plan === 'enterprise'\",\n environments: { production: false, staging: true, development: false },\n evaluationCount: '120K/day',\n lastUpdated: '5 days ago',\n },\n]\n\ninterface EnvBadge {\n label: string\n key: keyof EnvironmentState\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-feature-flags-manager, [ui-feature-flags-manager]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiProgressComponent,\n UiSwitchComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n

Feature Flags

\n

\n Safely deploy features with percentage rollouts, user targeting, and kill switches.\n

\n
\n
\n \n
\n
\n\n \n
\n
\n
\n Total Flags\n
\n \n
\n
\n
\n
24
\n

5 in current scope

\n
\n
\n\n
\n
\n Active Rollouts\n
\n \n
\n
\n
\n
8
\n

Gradual traffic ramps

\n
\n
\n\n
\n
\n Kill-Switches Armed\n
\n \n
\n
\n
\n
3
\n

Instant emergency trip

\n
\n
\n\n
\n
\n Evaluation Volume\n
\n \n
\n
\n
\n
4.2M/day
\n

99.99% cache hit ยท 1.2ms p99

\n
\n
\n
\n\n \n
\n
\n
\n \n \n
\n\n
\n @for (opt of statusOptions; track opt.value) {\n \n }\n
\n
\n\n
\n \n Showing {{ filteredFlags().length }} of {{ flags().length }} flags\n \n
\n
\n\n \n
\n
\n
\n \n \n Flag\n Status\n Rollout\n Targeting Rules\n Environments\n \n Actions\n \n \n \n \n @for (flag of filteredFlags(); track flag.id) {\n \n \n \n
\n
\n {{ flag.name }}\n
\n
\n {{ flag.key }}\n \n @if (copiedKey() === flag.key) {\n \n } @else {\n \n }\n Copy {{ flag.key }}\n \n
\n

{{ flag.description }}

\n
\n @for (tag of flag.tags; track tag) {\n {{ tag }}\n }\n
\n
\n \n\n \n \n
\n \n {{ flag.enabled ? 'Enabled' : 'Disabled' }}\n
\n \n\n \n \n
\n
\n {{\n flag.enabled ? flag.rollout + '%' : '0%'\n }}\n {{ rolloutLabel(flag) }}\n
\n
\n
\n \n\n \n \n
\n \n Target:\n {{ flag.targetingRules }}\n \n
\n \n\n \n \n
\n @for (env of envBadges; track env.key) {\n \n \n {{ env.label }}\n \n }\n
\n \n\n \n \n \n \n \n Actions for {{ flag.name }}\n \n \n \n \n Edit rules\n \n \n \n Audit history\n \n \n \n Copy flag key\n \n \n \n \n Delete flag\n \n \n \n \n \n }\n\n \n @if (filteredFlags().length === 0) {\n \n \n
\n \n

No feature flags found

\n

\n No flags match your search or filter criteria. Try adjusting your query.\n

\n
\n \n \n }\n \n
\n
\n
\n
\n `,\n})\nexport class UiFeatureFlagsManagerComponent {\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Flag = Flag\n protected readonly History = History\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Plus = Plus\n protected readonly Search = Search\n protected readonly ShieldAlert = ShieldAlert\n protected readonly Sliders = Sliders\n protected readonly SlidersHorizontal = SlidersHorizontal\n protected readonly Trash2 = Trash2\n protected readonly Zap = Zap\n\n protected readonly statusOptions: { value: FeatureFlagStatusFilter; label: string }[] = [\n { value: 'all', label: 'All' },\n { value: 'enabled', label: 'Enabled' },\n { value: 'disabled', label: 'Disabled' },\n ]\n\n protected readonly envBadges: EnvBadge[] = [\n { label: 'Prod', key: 'production' },\n { label: 'Stg', key: 'staging' },\n { label: 'Dev', key: 'development' },\n ]\n\n private readonly destroyRef = inject(DestroyRef)\n private readonly timers = new Set>()\n\n /** Seed rows; later edits live in the component's own state, as in React's useState initialiser. */\n @Input() set initialFlags(value: FeatureFlag[] | undefined) {\n this.flags.set(value ?? defaultFlags)\n }\n @Input('class') className?: string\n\n readonly flags = signal(defaultFlags)\n readonly searchQuery = signal('')\n readonly selectedStatus = signal('all')\n readonly copiedKey = signal(null)\n\n readonly filteredFlags = computed(() => {\n const query = this.searchQuery().trim().toLowerCase()\n const status = this.selectedStatus()\n return this.flags().filter((flag) => {\n if (status === 'enabled' && !flag.enabled) return false\n if (status === 'disabled' && flag.enabled) return false\n if (!query) return true\n return (\n flag.name.toLowerCase().includes(query) ||\n flag.key.toLowerCase().includes(query) ||\n flag.description.toLowerCase().includes(query) ||\n flag.tags.some((t) => t.toLowerCase().includes(query))\n )\n })\n })\n\n constructor() {\n this.destroyRef.onDestroy(() => {\n for (const t of this.timers) clearTimeout(t)\n this.timers.clear()\n })\n }\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n toggleFlag(id: string): void {\n this.flags.update((prev) => prev.map((flag) => (flag.id === id ? { ...flag, enabled: !flag.enabled } : flag)))\n }\n\n deleteFlag(id: string): void {\n this.flags.update((prev) => prev.filter((flag) => flag.id !== id))\n }\n\n copyFlagKey(key: string): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n void navigator.clipboard.writeText(key)\n this.copiedKey.set(key)\n const t = setTimeout(() => {\n this.timers.delete(t)\n this.copiedKey.update((curr) => (curr === key ? null : curr))\n }, 2000)\n this.timers.add(t)\n }\n }\n\n statusButtonClass(value: FeatureFlagStatusFilter): string {\n return cn(\n 'min-h-6 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n this.selectedStatus() === value\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n rowClass(flag: FeatureFlag): string {\n return cn('hover:bg-muted/40 transition-colors', !flag.enabled && 'opacity-75 dark:opacity-70')\n }\n\n statusTextClass(flag: FeatureFlag): string {\n return cn('text-xs font-medium', flag.enabled ? 'text-success dark:text-success' : 'text-muted-foreground')\n }\n\n rolloutLabel(flag: FeatureFlag): string {\n if (!flag.enabled) return 'Inactive'\n return flag.rollout === 100 ? 'All users' : 'Ramp'\n }\n\n envBadgeClass(flag: FeatureFlag, key: keyof EnvironmentState): string {\n return cn(\n 'inline-flex items-center gap-1 rounded border px-1.5 py-0.5 font-mono text-xs font-medium',\n flag.environments[key]\n ? 'bg-success/10 text-success border-success/20'\n : 'bg-muted/40 text-muted-foreground border-transparent opacity-60',\n )\n }\n\n envDotClass(flag: FeatureFlag, key: keyof EnvironmentState): string {\n return cn('size-1.5 rounded-full', flag.environments[key] ? 'bg-success' : 'bg-muted-foreground/40')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-flags-manager/feature-flags-manager.component.ts" }, { "path": "packages/registry-angular/blocks/feature-flags-manager/index.ts", "content": "export {\n UiFeatureFlagsManagerComponent,\n defaultFlags,\n type EnvironmentState,\n type FeatureFlag,\n type FeatureFlagStatusFilter,\n} from './feature-flags-manager.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-flags-manager/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/table.json" ], "description": "LaunchDarkly and PostHog style feature flags management dashboard: top header with search and create flag button, summary KPI metric cards, master status switch, percentage rollout indicators, targeting rules summary, environment statuses, and action menus.", "categories": [ "devops", "dashboard", "app", "data" ] }