Building Your First Plugin - Part 2

Update plugins.yaml Permissions

# Add PDP evaluation permission
permissions:
  api:
    - method: GET
      path: /api/membership/users/{id}/roles
    - method: GET
      path: /api/membership/roles/{id}
    # Authorization endpoints
    - method: POST
      path: /access/v1/evaluation
    - method: POST
      path: /access/v1/evaluations    # For batch

Create AuthWrapper Component

// src/components/AuthWrapper.tsx
const React = (globalThis as any).React;
const { useState, useEffect } = React;
const sdk = (globalThis as any).pluginSdk;

interface IfCanProps {
  resource: string;
  action: string;
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

/**
 * Conditionally render children based on authorization
 */
export function IfCan({ resource, action, children, fallback = null }: IfCanProps) {
  const [authorized, setAuthorized] = useState<boolean | null>(null);

  useEffect(() => {
    checkAuth();
  }, [resource, action]);

  const checkAuth = async () => {
    try {
      const result = await sdk.authz.evaluate({
        resource: { type: resource },
        action: { name: action }
      });
      setAuthorized(result.decision === true);
    } catch (err) {
      console.error('Auth check failed:', err);
      setAuthorized(false);  // Fail closed
    }
  };

  if (authorized === null) {
    return null;  // Still checking
  }

  return authorized ? children : fallback;
}

/**
 * Button that only shows if user has permission
 */
export function ProtectedButton({ 
  resource, 
  action, 
  onClick, 
  children, 
  style = {},
  ...props 
}: any) {
  const [authorized, setAuthorized] = useState<boolean | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    checkAuth();
  }, [resource, action]);

  const checkAuth = async () => {
    try {
      const result = await sdk.authz.evaluate({
        resource: { type: resource },
        action: { name: action }
      });
      setAuthorized(result.decision === true);
    } catch {
      setAuthorized(false);
    }
  };

  const handleClick = async () => {
    setLoading(true);
    try {
      await onClick();
    } finally {
      setLoading(false);
    }
  };

  if (authorized === null || !authorized) {
    return null;
  }

  return React.createElement('button', {
    onClick: handleClick,
    disabled: loading,
    style: { ...style, opacity: loading ? 0.6 : 1 },
    ...props
  }, loading ? 'Loading...' : children);
}

Update Dashboard with Authorization

// In src/index.tsx - wrap content with IfCan
import { IfCan, ProtectedButton } from './components/AuthWrapper';

export function Dashboard() {
  // ... existing state and fetchRoles ...

  return React.createElement('div', { style: styles.container },
    // Header with protected action button
    React.createElement('div', { style: styles.header },
      React.createElement('h1', { style: styles.title }, 'My Roles'),
      
      // Only show refresh if user can view roles
      React.createElement(ProtectedButton, {
        resource: 'role-viewer.roles',
        action: 'refresh',
        onClick: fetchRoles,
        style: styles.refreshButton
      }, '🔄 Refresh')
    ),
    
    // Entire content protected
    React.createElement(IfCan, {
      resource: 'role-viewer.roles',
      action: 'view',
      fallback: React.createElement('div', { style: styles.accessDenied },
        '🔒 You do not have permission to view roles.'
      )
    },
      // ... role cards grid ...
    )
  );
}

Update plugins.yaml with Detail Route

contributions:
  routes:
    - path: /role-viewer
      component: Dashboard
      title: "My Roles"
      resource: role-viewer.route
      action: view
    # Add detail route
    - path: /role-viewer/role/:roleId
      component: RoleDetail
      title: "Role Details"
      resource: role-viewer.role
      action: view

Create RoleDetail Component

// src/RoleDetail.tsx
const React = (globalThis as any).React;
const { useState, useEffect } = React;
const sdk = (globalThis as any).pluginSdk;

interface RoleDetailProps {
  roleId: string;
}

export function RoleDetail({ roleId }: RoleDetailProps) {
  const [role, setRole] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchRoleDetail();
  }, [roleId]);

  const fetchRoleDetail = async () => {
    try {
      setLoading(true);
      const response = await sdk.api.fetch(`/api/membership/roles/${roleId}`);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      
      const data = await response.json();
      setRole(data);
    } catch (err: any) {
      setError(err.message || 'Failed to load role');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return React.createElement('div', { style: styles.container },
      React.createElement('div', { style: styles.skeleton }, 'Loading role details...')
    );
  }

  if (error || !role) {
    return React.createElement('div', { style: styles.container },
      React.createElement('div', { style: styles.errorBox },
        React.createElement('h3', null, 'Error'),
        React.createElement('p', null, error || 'Role not found'),
        React.createElement('a', { href: '/role-viewer', style: styles.backLink }, '← Back to Roles')
      )
    );
  }

  return React.createElement('div', { style: styles.container },
    // Back navigation
    React.createElement('a', { 
      href: '/role-viewer', 
      style: styles.backLink 
    }, '← Back to My Roles'),
    
    // Role header
    React.createElement('div', { style: styles.detailHeader },
      React.createElement('h1', { style: styles.detailTitle }, role.name),
      React.createElement('span', { 
        style: { 
          ...styles.sourceBadge,
          background: `${getSourceColor(role.source)}20`,
          color: getSourceColor(role.source)
        }
      }, role.source)
    ),
    
    // Description
    role.description && React.createElement('p', { 
      style: styles.description 
    }, role.description),
    
    // Metadata cards
    React.createElement('div', { style: styles.metaGrid },
      // Location
      role.location && React.createElement('div', { style: styles.metaCard },
        React.createElement('span', { style: styles.metaLabel }, '📍 Location'),
        React.createElement('span', { style: styles.metaValue }, role.location)
      ),
      
      // Assigned date
      role.assignedAt && React.createElement('div', { style: styles.metaCard },
        React.createElement('span', { style: styles.metaLabel }, '📅 Assigned'),
        React.createElement('span', { style: styles.metaValue }, 
          new Date(role.assignedAt).toLocaleDateString()
        )
      ),
      
      // Expiration
      role.expiresAt && React.createElement('div', { style: styles.metaCard },
        React.createElement('span', { style: styles.metaLabel }, '⏰ Expires'),
        React.createElement('span', { style: styles.metaValue }, 
          new Date(role.expiresAt).toLocaleDateString()
        )
      )
    ),
    
    // Permissions section
    role.permissions && role.permissions.length > 0 &&
      React.createElement('div', { style: styles.section },
        React.createElement('h3', { style: styles.sectionTitle }, '🔐 Permissions'),
        React.createElement('div', { style: styles.permissionList },
          role.permissions.map((perm: string, i: number) =>
            React.createElement('span', { 
              key: i, 
              style: styles.permissionTag 
            }, perm)
          )
        )
      )
  );
}

function getSourceColor(source: string): string {
  const colors: Record<string, string> = {
    direct: '#10b981',
    inherited: '#3b82f6',
    delegated: '#f59e0b'
  };
  return colors[source] || '#6b7280';
}

// Add styles for detail page
const styles = {
  container: { padding: '24px', maxWidth: '800px', margin: '0 auto' },
  backLink: { 
    color: 'var(--accent-cyan)', 
    textDecoration: 'none', 
    fontSize: '14px',
    display: 'block',
    marginBottom: '24px'
  },
  detailHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: '16px',
    marginBottom: '16px'
  },
  detailTitle: {
    margin: 0,
    fontSize: '32px',
    fontWeight: 700,
    color: 'var(--main-text, #f0f0f5)'
  },
  sourceBadge: {
    padding: '6px 12px',
    borderRadius: '6px',
    fontSize: '12px',
    fontWeight: 600,
    textTransform: 'uppercase' as const
  },
  description: {
    fontSize: '16px',
    color: 'var(--secondary-text, #9090a0)',
    marginBottom: '24px',
    lineHeight: 1.6
  },
  metaGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gap: '16px',
    marginBottom: '32px'
  },
  metaCard: {
    background: 'var(--card-bg, #16161f)',
    border: '1px solid var(--border, #2a2a3a)',
    borderRadius: '8px',
    padding: '16px',
    display: 'flex',
    flexDirection: 'column' as const,
    gap: '8px'
  },
  metaLabel: { fontSize: '13px', color: 'var(--muted-text, #606070)' },
  metaValue: { fontSize: '16px', fontWeight: 600, color: 'var(--main-text, #f0f0f5)' },
  section: { marginTop: '32px' },
  sectionTitle: {
    fontSize: '18px',
    fontWeight: 600,
    marginBottom: '16px',
    color: 'var(--main-text, #f0f0f5)'
  },
  permissionList: { display: 'flex', flexWrap: 'wrap' as const, gap: '8px' },
  permissionTag: {
    padding: '6px 12px',
    background: 'rgba(59, 130, 246, 0.1)',
    border: '1px solid rgba(59, 130, 246, 0.2)',
    borderRadius: '6px',
    fontSize: '13px',
    color: '#3b82f6'
  },
  skeleton: { padding: '48px', textAlign: 'center' as const, color: 'var(--muted-text)' },
  errorBox: { padding: '48px', textAlign: 'center' as const }
};

Update Entry Point Exports

// src/index.tsx - add RoleDetail to exports
import { RoleDetail } from './RoleDetail';

// ... Dashboard component ...

// Export both components
export const routes = { Dashboard, RoleDetail };
export const widgets = {};
export default { routes, widgets };

Make RoleCards Clickable

// In RoleCard.tsx - add navigation
export function RoleCard({ role }: { role: Role }) {
  const handleClick = () => {
    // Navigate to detail page
    window.location.href = `/role-viewer/role/${role.id}`;
  };

  return React.createElement('div', {
    style: cardStyle,
    onClick: handleClick,
    onMouseEnter: () => setIsHovered(true),
    onMouseLeave: () => setIsHovered(false),
    role: 'button',
    tabIndex: 0,
    onKeyPress: (e: any) => e.key === 'Enter' && handleClick()
  },
    // ... card content ...
  );
}

Add Batch Permission Check

// src/hooks/useBatchPermissions.ts
const React = (globalThis as any).React;
const { useState, useEffect } = React;
const sdk = (globalThis as any).pluginSdk;

interface Permission {
  resource: string;
  action: string;
}

/**
 * Check multiple permissions in a single API call
 */
export function useBatchPermissions(permissions: Permission[]) {
  const [results, setResults] = useState<Map<string, boolean>>(new Map());
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (permissions.length === 0) {
      setLoading(false);
      return;
    }
    
    checkPermissions();
  }, [JSON.stringify(permissions)]);

  const checkPermissions = async () => {
    try {
      setLoading(true);
      
      // Single batch API call!
      const response = await sdk.authz.batchEvaluate(
        permissions.map(p => ({
          resource: { type: p.resource },
          action: { name: p.action }
        }))
      );
      
      // Map results back to permission keys
      const resultMap = new Map<string, boolean>();
      permissions.forEach((p, i) => {
        const key = `${p.resource}:${p.action}`;
        const decision = response.decisions?.[i]?.decision;
        resultMap.set(key, decision === true || decision === 'Permit');
      });
      
      setResults(resultMap);
    } catch (err) {
      console.error('Batch permission check failed:', err);
      // Fail closed - all false
      const failedMap = new Map<string, boolean>();
      permissions.forEach(p => {
        failedMap.set(`${p.resource}:${p.action}`, false);
      });
      setResults(failedMap);
    } finally {
      setLoading(false);
    }
  };

  const can = (resource: string, action: string): boolean => {
    return results.get(`${resource}:${action}`) ?? false;
  };

  return { can, loading, results };
}

Use in RoleCard with Actions

// Updated RoleCard with action buttons
export function RoleCard({ role, permissions }: { role: Role, permissions: any }) {
  // ... existing code ...
  
  return React.createElement('div', { style: cardStyle },
    // ... header and content ...
    
    // Action buttons (only show if permitted)
    React.createElement('div', { style: styles.actions },
      permissions.can(`role.${role.id}`, 'edit') &&
        React.createElement('button', {
          style: styles.actionBtn,
          onClick: (e: any) => { e.stopPropagation(); handleEdit(role); }
        }, '✏️ Edit'),
      
      permissions.can(`role.${role.id}`, 'delegate') &&
        React.createElement('button', {
          style: styles.actionBtn,
          onClick: (e: any) => { e.stopPropagation(); handleDelegate(role); }
        }, '🔄 Delegate')
    )
  );
}

Update plugins.yaml with SSE Permission

permissions:
  api:
    # ... existing permissions ...
  sse:
    - /api/events/membership/roles

Create useRoleUpdates Hook

// src/hooks/useRoleUpdates.ts
const React = (globalThis as any).React;
const { useEffect, useRef } = React;
const sdk = (globalThis as any).pluginSdk;

/**
 * Subscribe to real-time role updates
 */
export function useRoleUpdates(onUpdate: (event: any) => void) {
  const unsubscribeRef = useRef<(() => void) | null>(null);

  useEffect(() => {
    // Subscribe to SSE stream
    unsubscribeRef.current = sdk.sse.subscribe(
      '/api/events/membership/roles',
      (data: any) => {
        console.log('Role update received:', data);
        onUpdate(data);
      }
    );

    // Cleanup on unmount
    return () => {
      if (unsubscribeRef.current) {
        unsubscribeRef.current();
      }
    };
  }, []);
}

// Usage in Dashboard
export function Dashboard() {
  const [roles, setRoles] = useState([]);
  
  // Subscribe to updates
  useRoleUpdates((event) => {
    if (event.type === 'role_assigned') {
      setRoles(prev => [...prev, event.role]);
    } else if (event.type === 'role_revoked') {
      setRoles(prev => prev.filter(r => r.id !== event.roleId));
    } else if (event.type === 'role_updated') {
      setRoles(prev => prev.map(r => 
        r.id === event.role.id ? event.role : r
      ));
    }
  });
  
  // ... rest of component
}

Add Update Indicator

// Show a toast when updates arrive
const [lastUpdate, setLastUpdate] = useState<string | null>(null);

useRoleUpdates((event) => {
  // ... handle update ...
  
  // Show notification
  setLastUpdate(`Role ${event.type.replace('_', ' ')} at ${new Date().toLocaleTimeString()}`);
  
  // Clear after 3 seconds
  setTimeout(() => setLastUpdate(null), 3000);
});

// In render
{lastUpdate && React.createElement('div', { style: styles.updateToast },
  '🔔 ', lastUpdate
)}

Empty State Component

// src/components/EmptyState.tsx
export function EmptyState({ icon, title, message, actionText, onAction }: any) {
  return React.createElement('div', { style: styles.emptyContainer },
    React.createElement('span', { style: styles.emptyIcon }, icon),
    React.createElement('h3', { style: styles.emptyTitle }, title),
    React.createElement('p', { style: styles.emptyMessage }, message),
    actionText && onAction && React.createElement('button', {
      style: styles.emptyAction,
      onClick: onAction
    }, actionText)
  );
}

const styles = {
  emptyContainer: {
    textAlign: 'center' as const,
    padding: '60px 24px',
    maxWidth: '400px',
    margin: '0 auto'
  },
  emptyIcon: { fontSize: '64px', marginBottom: '16px', display: 'block', opacity: 0.7 },
  emptyTitle: { fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: 'var(--main-text)' },
  emptyMessage: { fontSize: '14px', color: 'var(--secondary-text)', marginBottom: '24px' },
  emptyAction: {
    padding: '12px 24px',
    background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
    color: 'white',
    border: 'none',
    borderRadius: '8px',
    fontWeight: 600,
    cursor: 'pointer'
  }
};

Confirmation Dialog

// src/components/ConfirmDialog.tsx
export function ConfirmDialog({ 
  isOpen, 
  title, 
  message, 
  onConfirm, 
  onCancel, 
  danger = false 
}: any) {
  if (!isOpen) return null;

  return React.createElement('div', {
    style: styles.overlay,
    onClick: onCancel,
    role: 'dialog',
    'aria-modal': 'true'
  },
    React.createElement('div', {
      style: styles.dialog,
      onClick: (e: any) => e.stopPropagation()
    },
      React.createElement('h3', { style: styles.dialogTitle }, title),
      React.createElement('p', { style: styles.dialogMessage }, message),
      React.createElement('div', { style: styles.dialogActions },
        React.createElement('button', {
          style: styles.cancelBtn,
          onClick: onCancel
        }, 'Cancel'),
        React.createElement('button', {
          style: danger ? styles.dangerBtn : styles.confirmBtn,
          onClick: onConfirm
        }, danger ? 'Delete' : 'Confirm')
      )
    )
  );
}

const styles = {
  overlay: {
    position: 'fixed' as const,
    inset: 0,
    background: 'rgba(0,0,0,0.6)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 9999
  },
  dialog: {
    background: 'var(--card-bg, #16161f)',
    border: '1px solid var(--border, #2a2a3a)',
    borderRadius: '12px',
    padding: '24px',
    maxWidth: '400px',
    width: '90%'
  },
  dialogTitle: { margin: '0 0 12px 0', fontSize: '18px', fontWeight: 600 },
  dialogMessage: { margin: '0 0 24px 0', color: 'var(--secondary-text)' },
  dialogActions: { display: 'flex', gap: '12px', justifyContent: 'flex-end' },
  cancelBtn: {
    padding: '8px 16px',
    background: 'var(--bg-tertiary)',
    border: 'none',
    borderRadius: '6px',
    color: 'var(--main-text)',
    cursor: 'pointer'
  },
  confirmBtn: {
    padding: '8px 16px',
    background: '#3b82f6',
    border: 'none',
    borderRadius: '6px',
    color: 'white',
    cursor: 'pointer'
  },
  dangerBtn: {
    padding: '8px 16px',
    background: '#ef4444',
    border: 'none',
    borderRadius: '6px',
    color: 'white',
    cursor: 'pointer'
  }
};

Keyboard Shortcuts

// Add keyboard shortcuts to Dashboard
useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    // Ctrl/Cmd + R: Refresh
    if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
      e.preventDefault();
      fetchRoles();
    }
    
    // Escape: Close any open dialog
    if (e.key === 'Escape') {
      setShowConfirm(false);
    }
  };

  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

// Show hint in footer
React.createElement('div', { style: styles.shortcutHint },
  '💡 Shortcuts: ',
  React.createElement('kbd', { style: styles.kbd }, 'Ctrl+R'),
  ' Refresh'
)