mirror of
https://github.com/xtr-dev/payload-feature-flags.git
synced 2025-12-10 02:43:25 +00:00
Replace feature flags overview with spreadsheet-style interface
- Complete rewrite of FeatureFlagsView component with table layout - Added inline editing for enabled/disabled checkboxes - Added inline editing for rollout percentages with validation (0-100) - Implemented sortable columns (name, enabled, rollout %, last updated) - Added real-time search functionality across name, description, and tags - Added visual status indicators with color coding - Implemented proper API integration with PATCH requests for updates - Added loading states and success/error notifications - Improved responsive design with sticky status column - Added summary statistics at the bottom The new interface provides a much more efficient way to manage multiple feature flags at once, similar to a spreadsheet application. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -25,8 +25,11 @@ const FeatureFlagsViewComponent = () => {
|
||||
const [flags, setFlags] = useState<FeatureFlag[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [filter, setFilter] = useState<'all' | 'enabled' | 'disabled'>('all')
|
||||
const [search, setSearch] = useState('')
|
||||
const [sortField, setSortField] = useState<'name' | 'enabled' | 'rolloutPercentage' | 'updatedAt'>('name')
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
|
||||
const [saving, setSaving] = useState<string | null>(null)
|
||||
const [successMessage, setSuccessMessage] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
const abortController = new AbortController()
|
||||
@@ -47,7 +50,7 @@ const FeatureFlagsViewComponent = () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
const response = await fetch(`${config.serverURL}${config.routes.api}/feature-flags`, {
|
||||
const response = await fetch(`${config.serverURL}${config.routes.api}/feature-flags?limit=1000`, {
|
||||
credentials: 'include',
|
||||
signal,
|
||||
})
|
||||
@@ -81,36 +84,87 @@ const FeatureFlagsViewComponent = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const toggleFlag = useCallback(async (flagId: string, enabled: boolean) => {
|
||||
// For now, just show a message that editing isn't available in the custom view
|
||||
setError('Toggle functionality coming soon. Please use the standard collection view to edit flags.')
|
||||
setTimeout(() => setError(''), 3000)
|
||||
}, [])
|
||||
const updateFlag = useCallback(async (flagId: string, updates: Partial<FeatureFlag>) => {
|
||||
setSaving(flagId)
|
||||
setError('')
|
||||
setSuccessMessage('')
|
||||
|
||||
const filteredFlags = useMemo(() => {
|
||||
return flags.filter(flag => {
|
||||
const matchesFilter = filter === 'all' ||
|
||||
(filter === 'enabled' && flag.enabled) ||
|
||||
(filter === 'disabled' && !flag.enabled)
|
||||
try {
|
||||
const response = await fetch(`${config.serverURL}${config.routes.api}/feature-flags/${flagId}`, {
|
||||
method: 'PATCH',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(updates),
|
||||
})
|
||||
|
||||
const matchesSearch = !search ||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to update feature flag: ${response.statusText}`)
|
||||
}
|
||||
|
||||
const updatedFlag = await response.json()
|
||||
|
||||
// Update local state
|
||||
setFlags(prev => prev.map(flag =>
|
||||
flag.id === flagId ? { ...flag, ...updatedFlag } : flag
|
||||
))
|
||||
|
||||
setSuccessMessage('✓ Saved')
|
||||
setTimeout(() => setSuccessMessage(''), 2000)
|
||||
} catch (err) {
|
||||
console.error('Error updating feature flag:', err)
|
||||
setError(err instanceof Error ? err.message : 'Failed to update feature flag')
|
||||
setTimeout(() => setError(''), 5000)
|
||||
} finally {
|
||||
setSaving(null)
|
||||
}
|
||||
}, [config.serverURL, config.routes.api])
|
||||
|
||||
const handleSort = useCallback((field: typeof sortField) => {
|
||||
if (sortField === field) {
|
||||
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc')
|
||||
} else {
|
||||
setSortField(field)
|
||||
setSortDirection('asc')
|
||||
}
|
||||
}, [sortField])
|
||||
|
||||
const filteredAndSortedFlags = useMemo(() => {
|
||||
let filtered = flags
|
||||
|
||||
// Filter by search
|
||||
if (search) {
|
||||
filtered = flags.filter(flag =>
|
||||
flag.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
flag.description?.toLowerCase().includes(search.toLowerCase())
|
||||
flag.description?.toLowerCase().includes(search.toLowerCase()) ||
|
||||
flag.tags?.some(t => t.tag.toLowerCase().includes(search.toLowerCase()))
|
||||
)
|
||||
}
|
||||
|
||||
return matchesFilter && matchesSearch
|
||||
// Sort
|
||||
filtered.sort((a, b) => {
|
||||
let aVal: any = a[sortField]
|
||||
let bVal: any = b[sortField]
|
||||
|
||||
if (sortField === 'updatedAt') {
|
||||
aVal = new Date(aVal).getTime()
|
||||
bVal = new Date(bVal).getTime()
|
||||
}
|
||||
|
||||
if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1
|
||||
if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1
|
||||
return 0
|
||||
})
|
||||
}, [flags, filter, search])
|
||||
|
||||
const getStatusColor = (flag: FeatureFlag) => {
|
||||
if (!flag.enabled) return '#ef4444'
|
||||
if (flag.rolloutPercentage && flag.rolloutPercentage < 100) return '#f59e0b'
|
||||
return '#10b981'
|
||||
}
|
||||
return filtered
|
||||
}, [flags, search, sortField, sortDirection])
|
||||
|
||||
const getStatusText = (flag: FeatureFlag) => {
|
||||
if (!flag.enabled) return 'Disabled'
|
||||
if (flag.rolloutPercentage && flag.rolloutPercentage < 100) return `${flag.rolloutPercentage}% Rollout`
|
||||
return 'Enabled'
|
||||
const SortIcon = ({ field }: { field: typeof sortField }) => {
|
||||
if (sortField !== field) {
|
||||
return <span style={{ opacity: 0.3 }}>⇅</span>
|
||||
}
|
||||
return <span>{sortDirection === 'asc' ? '↑' : '↓'}</span>
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
@@ -121,24 +175,8 @@ const FeatureFlagsViewComponent = () => {
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ padding: '2rem' }}>
|
||||
<div style={{
|
||||
backgroundColor: '#fef2f2',
|
||||
border: '1px solid #fecaca',
|
||||
borderRadius: '0.5rem',
|
||||
padding: '1rem',
|
||||
color: '#dc2626'
|
||||
}}>
|
||||
<strong>Error:</strong> {error}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<div style={{ padding: '2rem', maxWidth: '100%' }}>
|
||||
{/* Header */}
|
||||
<div style={{ marginBottom: '2rem' }}>
|
||||
<h1 style={{
|
||||
@@ -147,24 +185,54 @@ const FeatureFlagsViewComponent = () => {
|
||||
color: '#111827',
|
||||
marginBottom: '0.5rem'
|
||||
}}>
|
||||
🚩 Feature Flags
|
||||
Feature Flags Dashboard
|
||||
</h1>
|
||||
<p style={{ color: '#6b7280', fontSize: '1rem' }}>
|
||||
Manage feature toggles, A/B tests, and gradual rollouts
|
||||
Manage all feature flags in a spreadsheet view
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Success/Error Messages */}
|
||||
{successMessage && (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
backgroundColor: '#10b981',
|
||||
color: 'white',
|
||||
padding: '0.75rem 1.5rem',
|
||||
borderRadius: '0.5rem',
|
||||
boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
|
||||
zIndex: 1000,
|
||||
}}>
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div style={{
|
||||
marginBottom: '1rem',
|
||||
backgroundColor: '#fef2f2',
|
||||
border: '1px solid #fecaca',
|
||||
borderRadius: '0.5rem',
|
||||
padding: '1rem',
|
||||
color: '#dc2626'
|
||||
}}>
|
||||
<strong>Error:</strong> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
marginBottom: '2rem',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center'
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search flags..."
|
||||
placeholder="Search flags by name, description, or tags..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
style={{
|
||||
@@ -172,241 +240,319 @@ const FeatureFlagsViewComponent = () => {
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '0.5rem',
|
||||
fontSize: '0.875rem',
|
||||
minWidth: '200px'
|
||||
width: '300px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||
{(['all', 'enabled', 'disabled'] as const).map(filterType => (
|
||||
<button
|
||||
key={filterType}
|
||||
onClick={() => setFilter(filterType)}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '0.5rem',
|
||||
backgroundColor: filter === filterType ? '#3b82f6' : 'white',
|
||||
color: filter === filterType ? 'white' : '#374151',
|
||||
fontSize: '0.875rem',
|
||||
cursor: 'pointer',
|
||||
textTransform: 'capitalize'
|
||||
}}
|
||||
>
|
||||
{filterType}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => fetchFlags()}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '0.5rem',
|
||||
backgroundColor: 'white',
|
||||
color: '#374151',
|
||||
fontSize: '0.875rem',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
🔄 Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
|
||||
gap: '1rem',
|
||||
marginBottom: '2rem'
|
||||
}}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid #e5e7eb',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div style={{ fontSize: '2rem', fontWeight: '700', color: '#111827' }}>
|
||||
{flags.length}
|
||||
<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
|
||||
<div style={{ fontSize: '0.875rem', color: '#6b7280' }}>
|
||||
{filteredAndSortedFlags.length} of {flags.length} flags
|
||||
</div>
|
||||
<div style={{ color: '#6b7280', fontSize: '0.875rem' }}>Total Flags</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid #e5e7eb',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div style={{ fontSize: '2rem', fontWeight: '700', color: '#10b981' }}>
|
||||
{flags.filter(f => f.enabled).length}
|
||||
</div>
|
||||
<div style={{ color: '#6b7280', fontSize: '0.875rem' }}>Enabled</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid #e5e7eb',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div style={{ fontSize: '2rem', fontWeight: '700', color: '#f59e0b' }}>
|
||||
{flags.filter(f => f.enabled && f.rolloutPercentage && f.rolloutPercentage < 100).length}
|
||||
</div>
|
||||
<div style={{ color: '#6b7280', fontSize: '0.875rem' }}>Rolling Out</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid #e5e7eb',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div style={{ fontSize: '2rem', fontWeight: '700', color: '#8b5cf6' }}>
|
||||
{flags.filter(f => f.variants && f.variants.length > 0).length}
|
||||
</div>
|
||||
<div style={{ color: '#6b7280', fontSize: '0.875rem' }}>A/B Tests</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature Flags List */}
|
||||
{filteredFlags.length === 0 ? (
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
padding: '3rem',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid #e5e7eb'
|
||||
}}>
|
||||
<div style={{ fontSize: '1.125rem', color: '#6b7280', marginBottom: '0.5rem' }}>
|
||||
{search || filter !== 'all' ? 'No flags match your criteria' : 'No feature flags yet'}
|
||||
</div>
|
||||
{(!search && filter === 'all') && (
|
||||
<div style={{ color: '#9ca3af', fontSize: '0.875rem' }}>
|
||||
Create your first feature flag to get started
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gap: '1rem' }}>
|
||||
{filteredFlags.map(flag => (
|
||||
<div key={flag.id} style={{
|
||||
<button
|
||||
onClick={() => fetchFlags()}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '0.5rem',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '0.75rem',
|
||||
border: '1px solid #e5e7eb',
|
||||
padding: '1.5rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: '1rem'
|
||||
}}>
|
||||
{/* Flag Info */}
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '0.5rem' }}>
|
||||
<h3 style={{
|
||||
fontSize: '1.125rem',
|
||||
fontWeight: '600',
|
||||
color: '#111827',
|
||||
margin: 0
|
||||
}}>
|
||||
{flag.name}
|
||||
</h3>
|
||||
|
||||
<div style={{
|
||||
padding: '0.25rem 0.75rem',
|
||||
borderRadius: '9999px',
|
||||
backgroundColor: getStatusColor(flag),
|
||||
color: 'white',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: '500'
|
||||
}}>
|
||||
{getStatusText(flag)}
|
||||
</div>
|
||||
|
||||
{flag.environment && (
|
||||
<div style={{
|
||||
padding: '0.25rem 0.75rem',
|
||||
borderRadius: '9999px',
|
||||
backgroundColor: '#f3f4f6',
|
||||
color: '#374151',
|
||||
fontSize: '0.75rem',
|
||||
textTransform: 'capitalize'
|
||||
}}>
|
||||
{flag.environment}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{flag.description && (
|
||||
<p style={{
|
||||
color: '#6b7280',
|
||||
fontSize: '0.875rem',
|
||||
margin: '0 0 0.75rem 0'
|
||||
}}>
|
||||
{flag.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', gap: '1rem', fontSize: '0.75rem', color: '#9ca3af' }}>
|
||||
{flag.variants && flag.variants.length > 0 && (
|
||||
<span>🧪 {flag.variants.length} variants</span>
|
||||
)}
|
||||
{flag.tags && flag.tags.length > 0 && (
|
||||
<span>🏷️ {flag.tags.map(t => t.tag).join(', ')}</span>
|
||||
)}
|
||||
<span>📅 {new Date(flag.updatedAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggle Switch */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
<label style={{
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
width: '60px',
|
||||
height: '34px'
|
||||
}}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={flag.enabled}
|
||||
onChange={(e) => toggleFlag(flag.id, e.target.checked)}
|
||||
style={{ opacity: 0, width: 0, height: 0 }}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
cursor: 'pointer',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: flag.enabled ? '#10b981' : '#ccc',
|
||||
borderRadius: '34px',
|
||||
transition: '0.4s',
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
height: '26px',
|
||||
width: '26px',
|
||||
left: flag.enabled ? '30px' : '4px',
|
||||
bottom: '4px',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '50%',
|
||||
transition: '0.4s'
|
||||
}} />
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
color: '#374151',
|
||||
fontSize: '0.875rem',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
🔄 Refresh
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Spreadsheet Table */}
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: '0.75rem',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
fontSize: '0.875rem'
|
||||
}}>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: '#f9fafb' }}>
|
||||
<th style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'left',
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
position: 'sticky',
|
||||
left: 0,
|
||||
backgroundColor: '#f9fafb',
|
||||
minWidth: '50px'
|
||||
}}>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
onClick={() => handleSort('name')}
|
||||
style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'left',
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
cursor: 'pointer',
|
||||
minWidth: '200px',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
>
|
||||
Name <SortIcon field="name" />
|
||||
</th>
|
||||
<th style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'left',
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
minWidth: '300px'
|
||||
}}>
|
||||
Description
|
||||
</th>
|
||||
<th
|
||||
onClick={() => handleSort('enabled')}
|
||||
style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'center',
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
cursor: 'pointer',
|
||||
minWidth: '80px',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
>
|
||||
Enabled <SortIcon field="enabled" />
|
||||
</th>
|
||||
<th
|
||||
onClick={() => handleSort('rolloutPercentage')}
|
||||
style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'center',
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
cursor: 'pointer',
|
||||
minWidth: '120px',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
>
|
||||
Rollout % <SortIcon field="rolloutPercentage" />
|
||||
</th>
|
||||
<th style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'center',
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
minWidth: '100px'
|
||||
}}>
|
||||
Variants
|
||||
</th>
|
||||
<th style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'left',
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
minWidth: '150px'
|
||||
}}>
|
||||
Tags
|
||||
</th>
|
||||
<th
|
||||
onClick={() => handleSort('updatedAt')}
|
||||
style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'left',
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
cursor: 'pointer',
|
||||
minWidth: '150px',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
>
|
||||
Last Updated <SortIcon field="updatedAt" />
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredAndSortedFlags.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={8} style={{
|
||||
padding: '2rem',
|
||||
textAlign: 'center',
|
||||
color: '#6b7280'
|
||||
}}>
|
||||
{search ? 'No flags match your search' : 'No feature flags yet'}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredAndSortedFlags.map(flag => (
|
||||
<tr key={flag.id} style={{
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
transition: 'background-color 0.15s',
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f9fafb'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = ''}
|
||||
>
|
||||
<td style={{
|
||||
padding: '0.75rem 1rem',
|
||||
position: 'sticky',
|
||||
left: 0,
|
||||
backgroundColor: 'inherit'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: flag.enabled ?
|
||||
(flag.rolloutPercentage && flag.rolloutPercentage < 100 ? '#f59e0b' : '#10b981')
|
||||
: '#ef4444'
|
||||
}} />
|
||||
</td>
|
||||
<td style={{
|
||||
padding: '0.75rem 1rem',
|
||||
fontWeight: '500',
|
||||
color: '#111827'
|
||||
}}>
|
||||
{flag.name}
|
||||
</td>
|
||||
<td style={{
|
||||
padding: '0.75rem 1rem',
|
||||
color: '#6b7280'
|
||||
}}>
|
||||
{flag.description || '-'}
|
||||
</td>
|
||||
<td style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={flag.enabled}
|
||||
onChange={(e) => updateFlag(flag.id, { enabled: e.target.checked })}
|
||||
disabled={saving === flag.id}
|
||||
style={{
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
cursor: saving === flag.id ? 'wait' : 'pointer',
|
||||
accentColor: '#10b981'
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' }}>
|
||||
<input
|
||||
type="number"
|
||||
value={flag.rolloutPercentage || 100}
|
||||
onChange={(e) => {
|
||||
const value = Math.min(100, Math.max(0, parseInt(e.target.value) || 0))
|
||||
updateFlag(flag.id, { rolloutPercentage: value })
|
||||
}}
|
||||
disabled={!flag.enabled || saving === flag.id}
|
||||
min="0"
|
||||
max="100"
|
||||
style={{
|
||||
width: '60px',
|
||||
padding: '0.25rem 0.5rem',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '0.25rem',
|
||||
fontSize: '0.875rem',
|
||||
textAlign: 'center',
|
||||
cursor: saving === flag.id ? 'wait' : 'text',
|
||||
opacity: flag.enabled ? 1 : 0.5
|
||||
}}
|
||||
/>
|
||||
<span style={{ color: '#6b7280' }}>%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{
|
||||
padding: '0.75rem 1rem',
|
||||
textAlign: 'center',
|
||||
color: '#6b7280'
|
||||
}}>
|
||||
{flag.variants && flag.variants.length > 0 ? (
|
||||
<span style={{
|
||||
backgroundColor: '#f3f4f6',
|
||||
padding: '0.25rem 0.5rem',
|
||||
borderRadius: '0.25rem',
|
||||
fontSize: '0.75rem'
|
||||
}}>
|
||||
{flag.variants.length} variants
|
||||
</span>
|
||||
) : '-'}
|
||||
</td>
|
||||
<td style={{
|
||||
padding: '0.75rem 1rem'
|
||||
}}>
|
||||
{flag.tags && flag.tags.length > 0 ? (
|
||||
<div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap' }}>
|
||||
{flag.tags.map((t, i) => (
|
||||
<span key={i} style={{
|
||||
backgroundColor: '#e0e7ff',
|
||||
color: '#3730a3',
|
||||
padding: '0.125rem 0.5rem',
|
||||
borderRadius: '0.25rem',
|
||||
fontSize: '0.75rem'
|
||||
}}>
|
||||
{t.tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : '-'}
|
||||
</td>
|
||||
<td style={{
|
||||
padding: '0.75rem 1rem',
|
||||
color: '#6b7280',
|
||||
fontSize: '0.75rem'
|
||||
}}>
|
||||
{new Date(flag.updatedAt).toLocaleDateString()} {new Date(flag.updatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary Stats */}
|
||||
<div style={{
|
||||
marginTop: '2rem',
|
||||
display: 'flex',
|
||||
gap: '2rem',
|
||||
fontSize: '0.875rem',
|
||||
color: '#6b7280'
|
||||
}}>
|
||||
<div>
|
||||
<span style={{ fontWeight: '600' }}>Total:</span> {flags.length} flags
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ fontWeight: '600' }}>Enabled:</span> {flags.filter(f => f.enabled).length}
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ fontWeight: '600' }}>Disabled:</span> {flags.filter(f => !f.enabled).length}
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ fontWeight: '600' }}>Rolling out:</span> {flags.filter(f => f.enabled && f.rolloutPercentage && f.rolloutPercentage < 100).length}
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ fontWeight: '600' }}>A/B Tests:</span> {flags.filter(f => f.variants && f.variants.length > 0).length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user