Arch changes and feature flags

2025-11-23 15:46:51 +00:00
parent 6f1d09cd77
commit e1659c07ea
22 changed files with 577 additions and 119 deletions
@@ -0,0 +1,80 @@
+import React from 'react';
+import { useFeatureFlags } from '../contexts/FeatureFlagContext';
+
+const FeatureFlagStatus: React.FC = () => {
+  const { flags, loading, error, reloadFlags } = useFeatureFlags();
+
+  if (loading) {
+    return <div style={{ fontSize: '14px', color: '#666' }}>Loading feature flags...</div>;
+  }
+
+  if (error) {
+    return <div style={{ fontSize: '14px', color: '#d32f2f' }}>Error loading feature flags</div>;
+  }
+
+  if (!flags) {
+    return null;
+  }
+
+  const handleReload = async () => {
+    try {
+      await reloadFlags();
+      console.log('Feature flags reloaded');
+    } catch (error) {
+      console.error('Failed to reload feature flags:', error);
+    }
+  };
+
+  return (
+    <div className="card" style={{ marginBottom: '20px' }}>
+      <h4 style={{ marginBottom: '16px' }}>Feature Flags Status</h4>
+      
+      <div style={{ display: 'grid', gap: '8px', marginBottom: '16px' }}>
+        {Object.entries(flags.flags).map(([name, value]) => (
+          <div
+            key={name}
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '8px 12px',
+              backgroundColor: '#f5f5f5',
+              borderRadius: '4px',
+              fontSize: '14px'
+            }}
+          >
+            <span style={{ fontWeight: '500' }}>
+              {name.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
+            </span>
+            <span
+              style={{
+                padding: '2px 8px',
+                borderRadius: '12px',
+                fontSize: '12px',
+                fontWeight: '500',
+                backgroundColor: value ? '#4CAF50' : '#f44336',
+                color: 'white'
+              }}
+            >
+              {String(value)}
+            </span>
+          </div>
+        ))}
+      </div>
+      
+      <button
+        className="btn btn-secondary"
+        onClick={handleReload}
+        style={{ fontSize: '12px', padding: '6px 12px' }}
+      >
+        Reload Flags
+      </button>
+      
+      <p style={{ fontSize: '12px', color: '#666', marginTop: '12px', marginBottom: 0 }}>
+        Feature flags are loaded from environment variables. Changes require updating the .env file and reloading.
+      </p>
+    </div>
+  );
+};
+
+export default FeatureFlagStatus;