Merge pull request #148 from bg-playground/copilot/add-role-gate-component

bg-playground · web-flow · commit f0af0235e5fd · 2026-02-25T17:53:54.000-05:00
feat: Enforce RBAC in frontend UI with RoleGate component and useRoleGate hook
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
@@ -17,9 +17,9 @@ export const Navigation: React.FC = () => {
   ];
 
   const roleBadgeColor = {
-    admin: 'bg-red-500',
-    reviewer: 'bg-yellow-500',
-    viewer: 'bg-blue-500',
+    admin: 'bg-purple-600',
+    reviewer: 'bg-blue-500',
+    viewer: 'bg-gray-400',
   } as const;
 
   return (
diff --git a/frontend/src/components/RoleGate.tsx b/frontend/src/components/RoleGate.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { useRoleGate } from '../hooks/useRoleGate';
+
+interface RoleGateProps {
+  allowedRoles: string[];
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export const RoleGate: React.FC<RoleGateProps> = ({ allowedRoles, children, fallback = null }) => {
+  const { hasRole } = useRoleGate();
+  return hasRole(allowedRoles) ? <>{children}</> : <>{fallback}</>;
+};
diff --git a/frontend/src/components/SuggestionCard.tsx b/frontend/src/components/SuggestionCard.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { SuggestionStatus } from '../types/api';
 import type { Suggestion, Requirement, TestCase } from '../types/api';
+import { useRoleGate } from '../hooks/useRoleGate';
 
 interface SuggestionCardProps {
   suggestion: Suggestion;
@@ -31,18 +32,22 @@ export const SuggestionCard = React.forwardRef<HTMLDivElement, SuggestionCardPro
   onPreview,
 }, ref) => {
   const badge = getConfidenceBadge(suggestion.similarity_score);
+  const { hasRole } = useRoleGate();
+  const canReview = hasRole(['admin', 'reviewer']);
   return (
     <div
       ref={ref}
       className={`bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow${isFocused ? ' ring-2 ring-blue-500' : ''}`}
     >
       <div className="flex items-start gap-3">
-        <input
-          type="checkbox"
-          checked={isSelected}
-          onChange={(e) => onToggleSelect(suggestion.id, e.target.checked)}
-          className="mt-1"
-        />
+        {canReview && (
+          <input
+            type="checkbox"
+            checked={isSelected}
+            onChange={(e) => onToggleSelect(suggestion.id, e.target.checked)}
+            className="mt-1"
+          />
+        )}
         <div className="flex-1">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="border-r pr-6">
@@ -103,18 +108,22 @@ export const SuggestionCard = React.forwardRef<HTMLDivElement, SuggestionCardPro
               >
                 Quick Preview
               </button>
-              <button
-                onClick={() => onReview(suggestion.id, SuggestionStatus.REJECTED)}
-                className="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
-              >
-                Reject
-              </button>
-              <button
-                onClick={() => onReview(suggestion.id, SuggestionStatus.ACCEPTED)}
-                className="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
-              >
-                Accept
-              </button>
+              {canReview && (
+                <>
+                  <button
+                    onClick={() => onReview(suggestion.id, SuggestionStatus.REJECTED)}
+                    className="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
+                  >
+                    Reject
+                  </button>
+                  <button
+                    onClick={() => onReview(suggestion.id, SuggestionStatus.ACCEPTED)}
+                    className="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+                  >
+                    Accept
+                  </button>
+                </>
+              )}
             </div>
           </div>
         </div>
diff --git a/frontend/src/hooks/useRoleGate.ts b/frontend/src/hooks/useRoleGate.ts
@@ -0,0 +1,22 @@
+import { useAuth } from '../context/AuthContext';
+
+export interface UseRoleGateResult {
+  role: string;
+  isAdmin: boolean;
+  isReviewer: boolean;
+  isViewer: boolean;
+  hasRole: (roles: string[]) => boolean;
+}
+
+export function useRoleGate(): UseRoleGateResult {
+  const { user } = useAuth();
+  const role = user?.role ?? 'viewer';
+
+  return {
+    role,
+    isAdmin: role === 'admin',
+    isReviewer: role === 'reviewer',
+    isViewer: role === 'viewer',
+    hasRole: (roles: string[]) => roles.includes(role),
+  };
+}
diff --git a/frontend/src/pages/RequirementsPage.tsx b/frontend/src/pages/RequirementsPage.tsx
@@ -5,6 +5,7 @@ import type { Requirement, RequirementCreate, RequirementUpdate } from '../types
 import { LoadingSpinner } from '../components/LoadingSpinner';
 import { Pagination } from '../components/Pagination';
 import { useToast } from '../context/ToastContext';
+import { useRoleGate } from '../hooks/useRoleGate';
 
 export const RequirementsPage: React.FC = () => {
   const [requirements, setRequirements] = useState<Requirement[]>([]);
@@ -23,6 +24,7 @@ export const RequirementsPage: React.FC = () => {
     status: RequirementStatus.DRAFT,
   });
   const { showToast } = useToast();
+  const { isAdmin } = useRoleGate();
 
   const loadRequirements = useCallback(async (targetPage = page) => {
     try {
@@ -120,12 +122,14 @@ export const RequirementsPage: React.FC = () => {
         <h1 className="text-3xl font-bold text-gray-900">
           Requirements {total > 0 && <span className="text-lg font-normal text-gray-500">({total} total)</span>}
         </h1>
-        <button
-          onClick={() => setShowModal(true)}
-          className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
-        >
-          + New Requirement
-        </button>
+        {isAdmin && (
+          <button
+            onClick={() => setShowModal(true)}
+            className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
+          >
+            + New Requirement
+          </button>
+        )}
       </div>
 
       {requirements.length === 0 ? (
@@ -166,18 +170,22 @@ export const RequirementsPage: React.FC = () => {
                   </div>
                 </div>
                 <div className="flex gap-2 ml-4">
-                  <button
-                    onClick={() => handleEdit(req)}
-                    className="px-4 py-2 text-sm bg-blue-500 text-white rounded hover:bg-blue-600"
-                  >
-                    Edit
-                  </button>
-                  <button
-                    onClick={() => handleDelete(req.id)}
-                    className="px-4 py-2 text-sm bg-red-500 text-white rounded hover:bg-red-600"
-                  >
-                    Delete
-                  </button>
+                  {isAdmin && (
+                    <>
+                      <button
+                        onClick={() => handleEdit(req)}
+                        className="px-4 py-2 text-sm bg-blue-500 text-white rounded hover:bg-blue-600"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => handleDelete(req.id)}
+                        className="px-4 py-2 text-sm bg-red-500 text-white rounded hover:bg-red-600"
+                      >
+                        Delete
+                      </button>
+                    </>
+                  )}
                 </div>
               </div>
             </div>
@@ -187,7 +195,7 @@ export const RequirementsPage: React.FC = () => {
 
       <Pagination page={page} pages={pages} total={total} onPageChange={setPage} />
 
-      {showModal && (
+      {showModal && isAdmin && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div className="bg-white rounded-lg p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
             <h2 className="text-2xl font-bold mb-6">
diff --git a/frontend/src/pages/SuggestionDashboard.tsx b/frontend/src/pages/SuggestionDashboard.tsx
@@ -16,6 +16,7 @@ import { SuggestionStats } from '../components/SuggestionStats';
 import { SuggestionCard } from '../components/SuggestionCard';
 import { SuggestionPreviewModal } from '../components/SuggestionPreviewModal';
 import { VirtualizedSuggestionList } from '../components/VirtualizedSuggestionList';
+import { useRoleGate } from '../hooks/useRoleGate';
 
 const VIRTUALIZATION_THRESHOLD = 50;
 
@@ -100,6 +101,8 @@ export const SuggestionDashboard: React.FC = () => {
   const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
   const [previewSuggestion, setPreviewSuggestion] = useState<Suggestion | null>(null);
   const { showToast } = useToast();
+  const { isAdmin, hasRole } = useRoleGate();
+  const canReview = hasRole(['admin', 'reviewer']);
 
   // Filters state: priority URL params > localStorage > defaults
   const [filters, setFilters] = useState<Filters>(() =>
@@ -273,6 +276,7 @@ export const SuggestionDashboard: React.FC = () => {
           setFocusedIndex((prev) => (prev > 0 ? prev - 1 : prev));
           break;
         case 'a': {
+          if (!canReview) break;
           const hasFocusedCard = selectedIds.size === 0 && focusedIndex >= 0;
           if (hasFocusedCard) {
             // Accept focused card
@@ -284,6 +288,7 @@ export const SuggestionDashboard: React.FC = () => {
           break;
         }
         case 'r': {
+          if (!canReview) break;
           const hasFocusedCard = selectedIds.size === 0 && focusedIndex >= 0;
           if (hasFocusedCard) {
             handleReview(suggestions[focusedIndex].id, SuggestionStatus.REJECTED);
@@ -297,6 +302,7 @@ export const SuggestionDashboard: React.FC = () => {
         case ' ':
           if (focusedIndex >= 0) {
             e.preventDefault();
+            if (!canReview) break;
             const focusedId = suggestions[focusedIndex].id;
             setSelectedIds((prev) => {
               const next = new Set(prev);
@@ -313,15 +319,15 @@ export const SuggestionDashboard: React.FC = () => {
           if (focusedIndex >= 0 && selectedIds.size === 0) {
             // Open preview for focused suggestion
             setPreviewSuggestion(suggestions[focusedIndex]);
-          } else if (selectedIds.size > 0) {
+          } else if (selectedIds.size > 0 && canReview) {
             // Accept selected
             handleBulkAccept();
           }
           break;
         case 'Delete':
         case 'Backspace':
           // Reject selected
-          if (selectedIds.size > 0 && e.shiftKey) {
+          if (selectedIds.size > 0 && e.shiftKey && canReview) {
             e.preventDefault();
             handleBulkReject();
           }
@@ -331,7 +337,7 @@ export const SuggestionDashboard: React.FC = () => {
 
     window.addEventListener('keydown', handleKeyPress);
     return () => window.removeEventListener('keydown', handleKeyPress);
-  }, [suggestions, selectedIds, focusedIndex, handleBulkAccept, handleBulkReject, handleReview]);
+  }, [suggestions, selectedIds, focusedIndex, canReview, handleBulkAccept, handleBulkReject, handleReview]);
 
   const handleToggleSelect = useCallback((id: string, checked: boolean) => {
     setSelectedIds((prev) => {
@@ -357,27 +363,33 @@ export const SuggestionDashboard: React.FC = () => {
     <div className="container mx-auto px-4 py-8">
       <div className="flex items-center justify-between mb-8">
         <h1 className="text-3xl font-bold text-gray-900">AI Suggestion Dashboard</h1>
-        <button
-          onClick={handleGenerate}
-          disabled={generating}
-          className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
-        >
-          {generating ? (
-            <>
-              <LoadingSpinner size="sm" />
-              Generating...
-            </>
-          ) : (
-            'Generate Suggestions'
+        <div className="flex items-center gap-3">
+          {isAdmin && (
+            <button
+              onClick={handleGenerate}
+              disabled={generating}
+              className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
+            >
+              {generating ? (
+                <>
+                  <LoadingSpinner size="sm" />
+                  Generating...
+                </>
+              ) : (
+                'Generate Suggestions'
+              )}
+            </button>
+          )}
+          {canReview && (
+            <button
+              onClick={handleExportCsv}
+              disabled={exporting}
+              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400"
+            >
+              Export CSV
+            </button>
           )}
-        </button>
-        <button
-          onClick={handleExportCsv}
-          disabled={exporting}
-          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400"
-        >
-          Export CSV
-        </button>
+        </div>
       </div>
 
       <KeyboardShortcutsHelp />
@@ -425,7 +437,7 @@ export const SuggestionDashboard: React.FC = () => {
       )}
 
       {/* Bulk action bar */}
-      {selectedIds.size > 0 && (
+      {selectedIds.size > 0 && canReview && (
         <div className="fixed bottom-0 left-0 right-0 bg-primary-600 text-white shadow-lg p-4 flex items-center justify-between z-50">
           <div>
             <span className="font-semibold">{selectedIds.size} suggestions selected</span>
diff --git a/frontend/src/pages/TestCasesPage.tsx b/frontend/src/pages/TestCasesPage.tsx
