feat: role-based UI access control

- Hide Admin sidebar section for non-ADMIN users - Add RequireAdmin route guard — /admin/* redirects to / for non-admin - Move App Config from admin section to main Config tab (per-app, visible when app selected). VIEWER sees read-only, OPERATOR+ can edit - Hide diagram node toolbar for VIEWER (onNodeAction conditional) - Add useIsAdmin/useCanControl helpers to centralize role checks - Remove App Config from admin sidebar tree Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 15:51:15 +02:00
parent e54f308607
commit b1655b366e
10 changed files with 84 additions and 50 deletions
--- a/ui/src/auth/RequireAdmin.tsx
+++ b/ui/src/auth/RequireAdmin.tsx
@@ -0,0 +1,8 @@
+import { Navigate, Outlet } from 'react-router';
+import { useIsAdmin } from './auth-store';
+
+export function RequireAdmin() {
+  const isAdmin = useIsAdmin();
+  if (!isAdmin) return <Navigate to="/" replace />;
+  return <Outlet />;
+}
--- a/ui/src/auth/auth-store.ts
+++ b/ui/src/auth/auth-store.ts
@@ -164,3 +164,6 @@ export const useAuthStore = create<AuthState>((set, get) => ({
    }
  },
 }));
+
+export const useIsAdmin = () => useAuthStore((s) => s.roles.some(r => r === 'ADMIN'));
+export const useCanControl = () => useAuthStore((s) => s.roles.some(r => r === 'OPERATOR' || r === 'ADMIN'));
--- a/ui/src/components/ContentTabs.tsx
+++ b/ui/src/components/ContentTabs.tsx
@@ -3,13 +3,18 @@ import type { TabKey, Scope } from '../hooks/useScope';
 import { TabKpis } from './TabKpis';
 import styles from './ContentTabs.module.css';

-const TABS = [
+const BASE_TABS = [
  { label: 'Exchanges', value: 'exchanges' },
  { label: 'Dashboard', value: 'dashboard' },
  { label: 'Runtime', value: 'runtime' },
  { label: 'Logs', value: 'logs' },
 ];

+const TABS_WITH_CONFIG = [
+  ...BASE_TABS,
+  { label: 'Config', value: 'config' },
+];
+
 interface ContentTabsProps {
  active: TabKey;
  onChange: (tab: TabKey) => void;
@@ -17,10 +22,12 @@ interface ContentTabsProps {
 }

 export function ContentTabs({ active, onChange, scope }: ContentTabsProps) {
+  // Config tab only shown when an app is selected
+  const tabs = scope.appId ? TABS_WITH_CONFIG : BASE_TABS;
  return (
    <div className={styles.wrapper}>
      <Tabs
-        tabs={TABS}
+        tabs={tabs}
        active={active}
        onChange={(v) => onChange(v as TabKey)}
      />
--- a/ui/src/components/LayoutShell.tsx
+++ b/ui/src/components/LayoutShell.tsx
@@ -23,7 +23,7 @@ import { useAgents } from '../api/queries/agents';
 import { useSearchExecutions, useAttributeKeys } from '../api/queries/executions';
 import { useUsers, useGroups, useRoles } from '../api/queries/admin/rbac';
 import type { UserDetail, GroupDetail, RoleDetail } from '../api/queries/admin/rbac';
-import { useAuthStore } from '../auth/auth-store';
+import { useAuthStore, useIsAdmin } from '../auth/auth-store';
 import { useEnvironmentStore } from '../api/environment-store';
 import { useState, useMemo, useCallback, useEffect, useRef, createElement } from 'react';
 import type { ReactNode } from 'react';
@@ -277,6 +277,9 @@ function LayoutContent() {
  const queryClient = useQueryClient();
  const { timeRange, autoRefresh, refreshTimeRange } = useGlobalFilters();

+  // --- Role checks ----------------------------------------------------
+  const isAdmin = useIsAdmin();
+
  // --- Environment filtering -----------------------------------------
  const selectedEnv = useEnvironmentStore((s) => s.environment);
  const setSelectedEnvRaw = useEnvironmentStore((s) => s.setEnvironment);
@@ -668,25 +671,27 @@ function LayoutContent() {
        </Sidebar.Section>
      )}

-      {/* Admin section — stays in place, expands when on admin pages */}
-      <Sidebar.Section
-        icon={createElement(Settings, { size: 16 })}
-        label="Admin"
-        open={adminOpen}
-        onToggle={toggleAdmin}
-        active={isAdminPage}
-      >
-        <SidebarTree
-          nodes={adminTreeNodes}
-          selectedPath={location.pathname}
-          isStarred={isStarred}
-          onToggleStar={toggleStar}
-          filterQuery={filterQuery}
-          persistKey="admin"
-          autoRevealPath={sidebarRevealPath}
-          onNavigate={handleSidebarNavigate}
-        />
-      </Sidebar.Section>
+      {/* Admin section — only visible to ADMIN role */}
+      {isAdmin && (
+        <Sidebar.Section
+          icon={createElement(Settings, { size: 16 })}
+          label="Admin"
+          open={adminOpen}
+          onToggle={toggleAdmin}
+          active={isAdminPage}
+        >
+          <SidebarTree
+            nodes={adminTreeNodes}
+            selectedPath={location.pathname}
+            isStarred={isStarred}
+            onToggleStar={toggleStar}
+            filterQuery={filterQuery}
+            persistKey="admin"
+            autoRevealPath={sidebarRevealPath}
+            onNavigate={handleSidebarNavigate}
+          />
+        </Sidebar.Section>
+      )}

      {/* Footer */}
      <Sidebar.Footer>
--- a/ui/src/components/sidebar-utils.ts
+++ b/ui/src/components/sidebar-utils.ts
@@ -101,7 +101,6 @@ export function buildAdminTreeNodes(): SidebarTreeNode[] {
    { id: 'admin:rbac', label: 'Users & Roles', path: '/admin/rbac' },
    { id: 'admin:audit', label: 'Audit Log', path: '/admin/audit' },
    { id: 'admin:oidc', label: 'OIDC', path: '/admin/oidc' },
-    { id: 'admin:appconfig', label: 'App Config', path: '/admin/appconfig' },
    { id: 'admin:database', label: 'Database', path: '/admin/database' },
    { id: 'admin:clickhouse', label: 'ClickHouse', path: '/admin/clickhouse' },
  ];
--- a/ui/src/hooks/useScope.ts
+++ b/ui/src/hooks/useScope.ts
@@ -2,9 +2,9 @@
 import { useParams, useNavigate, useLocation } from 'react-router';
 import { useCallback } from 'react';

-export type TabKey = 'exchanges' | 'dashboard' | 'runtime' | 'logs';
+export type TabKey = 'exchanges' | 'dashboard' | 'runtime' | 'logs' | 'config';

-const VALID_TABS = new Set<TabKey>(['exchanges', 'dashboard', 'runtime', 'logs']);
+const VALID_TABS = new Set<TabKey>(['exchanges', 'dashboard', 'runtime', 'logs', 'config']);

 export interface Scope {
  tab: TabKey;
--- a/ui/src/pages/Admin/AppConfigPage.tsx
+++ b/ui/src/pages/Admin/AppConfigPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { useNavigate, useSearchParams } from 'react-router';
+import { useNavigate, useSearchParams, useParams } from 'react-router';
 import { Pencil, X } from 'lucide-react';
 import {
  DataTable, Badge, MonoText, DetailPanel, SectionHeader, Button, Toggle, Spinner, useToast,
@@ -8,6 +8,7 @@ import type { Column } from '@cameleer/design-system';
 import { useAllApplicationConfigs, useApplicationConfig, useUpdateApplicationConfig, useProcessorRouteMapping } from '../../api/queries/commands';
 import type { ApplicationConfig, TapDefinition, ConfigUpdateResponse } from '../../api/queries/commands';
 import { useRouteCatalog } from '../../api/queries/catalog';
+import { useCanControl } from '../../auth/auth-store';
 import type { AppCatalogEntry, RouteSummary } from '../../api/types';
 import styles from './AppConfigPage.module.css';

@@ -72,6 +73,7 @@ function buildColumns(): Column<ConfigRow>[] {
 function AppConfigDetail({ appId, onClose }: { appId: string; onClose: () => void }) {
  const { toast } = useToast();
  const navigate = useNavigate();
+  const canEdit = useCanControl();
  const { data: config, isLoading } = useApplicationConfig(appId);
  const updateConfig = useUpdateApplicationConfig();
  const { data: catalog } = useRouteCatalog();
@@ -241,9 +243,9 @@ function AppConfigDetail({ appId, onClose }: { appId: string; onClose: () => voi
              {updateConfig.isPending ? 'Saving\u2026' : 'Save'}
            </Button>
          </div>
-        ) : (
+        ) : canEdit ? (
          <button className={styles.editBtn} onClick={startEditing} title="Edit configuration"><Pencil size={14} /></button>
-        )}
+        ) : null}
      </div>

      {/* Settings */}
@@ -319,17 +321,22 @@ function AppConfigDetail({ appId, onClose }: { appId: string; onClose: () => voi
 // ── Main Page ────────────────────────────────────────────────────────────────

 export default function AppConfigPage() {
+  const { appId: routeAppId } = useParams<{ appId?: string }>();
  const { data: configs } = useAllApplicationConfigs();
  const [searchParams, setSearchParams] = useSearchParams();
-  const [selectedApp, setSelectedApp] = useState<string | null>(null);
+  const [selectedApp, setSelectedApp] = useState<string | null>(routeAppId ?? null);
  const columns = useMemo(buildColumns, []);

+  // Sync from route param when it changes (sidebar navigation)
+  useEffect(() => {
+    if (routeAppId) setSelectedApp(routeAppId);
+  }, [routeAppId]);
+
  // Auto-select app from query param (e.g., ?app=caller-app)
  useEffect(() => {
    const appParam = searchParams.get('app');
    if (appParam && !selectedApp) {
      setSelectedApp(appParam);
-      // Clean up the query param
      searchParams.delete('app');
      searchParams.delete('processor');
      setSearchParams(searchParams, { replace: true });
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -5,7 +5,7 @@ import { StatusDot, MonoText, Badge, useGlobalFilters } from '@cameleer/design-s
 import { useCorrelationChain } from '../../api/queries/correlation';
 import { useAgents } from '../../api/queries/agents';
 import { useRouteCatalog } from '../../api/queries/catalog';
-import { useAuthStore } from '../../auth/auth-store';
+import { useCanControl } from '../../auth/auth-store';
 import type { ExecutionDetail } from '../../components/ExecutionDiagram/types';
 import { attributeBadgeColor } from '../../utils/attribute-color';
 import { RouteControlBar } from './RouteControlBar';
@@ -79,8 +79,7 @@ export function ExchangeHeader({ detail, onCorrelatedSelect, onClearSelection }:
    };
  }, [agents, detail.instanceId]);

-  const roles = useAuthStore((s) => s.roles);
-  const canControl = roles.some(r => r === 'OPERATOR' || r === 'ADMIN');
+  const canControl = useCanControl();

  return (
    <div className={styles.header}>
--- a/ui/src/pages/Exchanges/ExchangesPage.tsx
+++ b/ui/src/pages/Exchanges/ExchangesPage.tsx
@@ -7,7 +7,7 @@ import { useRouteCatalog } from '../../api/queries/catalog';
 import { useAgents } from '../../api/queries/agents';
 import { useApplicationConfig, useUpdateApplicationConfig } from '../../api/queries/commands';
 import type { TapDefinition, ConfigUpdateResponse } from '../../api/queries/commands';
-import { useAuthStore } from '../../auth/auth-store';
+import { useCanControl } from '../../auth/auth-store';
 import { useTracingStore } from '../../stores/tracing-store';
 import type { NodeAction, NodeConfig } from '../../components/ProcessDiagram/types';
 import { TapConfigModal } from '../../components/TapConfigModal';
@@ -154,8 +154,7 @@ function DiagramPanel({ appId, routeId, exchangeId, onCorrelatedSelect, onClearS

  // Route state + capabilities for topology-only control bar
  const { data: agents } = useAgents(undefined, appId);
-  const roles = useAuthStore((s) => s.roles);
-  const canControl = roles.some(r => r === 'OPERATOR' || r === 'ADMIN');
+  const canControl = useCanControl();
  const { hasRouteControl, hasReplay } = useMemo(() => {
    if (!agents) return { hasRouteControl: false, hasReplay: false };
    const agentList = agents as any[];
@@ -332,7 +331,7 @@ function DiagramPanel({ appId, routeId, exchangeId, onCorrelatedSelect, onClearS
          executionDetail={detail}
          knownRouteIds={knownRouteIds}
          endpointRouteMap={endpointRouteMap}
-          onNodeAction={handleNodeAction}
+          onNodeAction={canControl ? handleNodeAction : undefined}
          nodeConfigs={nodeConfigs}
        />
        {tapModal}
@@ -359,7 +358,7 @@ function DiagramPanel({ appId, routeId, exchangeId, onCorrelatedSelect, onClearS
          diagramLayout={diagramQuery.data}
          knownRouteIds={knownRouteIds}
          endpointRouteMap={endpointRouteMap}
-          onNodeAction={handleNodeAction}
+          onNodeAction={canControl ? handleNodeAction : undefined}
          nodeConfigs={nodeConfigs}
        />
        {tapModal}
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -1,5 +1,6 @@
 import { createBrowserRouter, Navigate, useParams } from 'react-router';
 import { ProtectedRoute } from './auth/ProtectedRoute';
+import { RequireAdmin } from './auth/RequireAdmin';
 import { LoginPage } from './auth/LoginPage';
 import { OidcCallback } from './auth/OidcCallback';
 import { LayoutShell } from './components/LayoutShell';
@@ -76,6 +77,10 @@ export const router = createBrowserRouter([
          { path: 'logs/:appId', element: <SuspenseWrapper><LogsPage /></SuspenseWrapper> },
          { path: 'logs/:appId/:routeId', element: <SuspenseWrapper><LogsPage /></SuspenseWrapper> },

+          // Config tab (per-app, accessible to VIEWER+)
+          { path: 'config', element: <Navigate to="/exchanges" replace /> },
+          { path: 'config/:appId', element: <SuspenseWrapper><AppConfigPage /></SuspenseWrapper> },
+
          // Legacy redirects — Sidebar uses hardcoded /apps/... and /agents/... paths
          { path: 'apps', element: <Navigate to="/exchanges" replace /> },
          { path: 'apps/:appId', element: <LegacyAppRedirect /> },
@@ -84,19 +89,21 @@ export const router = createBrowserRouter([
          { path: 'agents/:appId', element: <LegacyAgentRedirect /> },
          { path: 'agents/:appId/:instanceId', element: <LegacyAgentRedirect /> },

-          // Admin (unchanged)
+          // Admin (ADMIN role required)
          {
-            path: 'admin',
-            element: <SuspenseWrapper><AdminLayout /></SuspenseWrapper>,
-            children: [
-              { index: true, element: <Navigate to="/admin/rbac" replace /> },
-              { path: 'rbac', element: <SuspenseWrapper><RbacPage /></SuspenseWrapper> },
-              { path: 'audit', element: <SuspenseWrapper><AuditLogPage /></SuspenseWrapper> },
-              { path: 'oidc', element: <SuspenseWrapper><OidcConfigPage /></SuspenseWrapper> },
-              { path: 'appconfig', element: <SuspenseWrapper><AppConfigPage /></SuspenseWrapper> },
-              { path: 'database', element: <SuspenseWrapper><DatabaseAdminPage /></SuspenseWrapper> },
-              { path: 'clickhouse', element: <SuspenseWrapper><ClickHouseAdminPage /></SuspenseWrapper> },
-            ],
+            element: <RequireAdmin />,
+            children: [{
+              path: 'admin',
+              element: <SuspenseWrapper><AdminLayout /></SuspenseWrapper>,
+              children: [
+                { index: true, element: <Navigate to="/admin/rbac" replace /> },
+                { path: 'rbac', element: <SuspenseWrapper><RbacPage /></SuspenseWrapper> },
+                { path: 'audit', element: <SuspenseWrapper><AuditLogPage /></SuspenseWrapper> },
+                { path: 'oidc', element: <SuspenseWrapper><OidcConfigPage /></SuspenseWrapper> },
+                { path: 'database', element: <SuspenseWrapper><DatabaseAdminPage /></SuspenseWrapper> },
+                { path: 'clickhouse', element: <SuspenseWrapper><ClickHouseAdminPage /></SuspenseWrapper> },
+              ],
+            }],
          },
          { path: 'api-docs', element: <SuspenseWrapper><SwaggerPage /></SuspenseWrapper> },
        ],