TenantSelector.jsx

Go to the documentation of this file.

import React, { useState, useEffect } from 'react';
import { apiFetch } from '../lib/api';
 
/**
 * TenantSelector - A reusable component for root users to select which tenant they're acting on behalf of
 * 
 * @param {string} selectedTenantId - The currently selected tenant ID
 * @param {function} onTenantChange - Callback when tenant selection changes
 * @param {object} style - Optional additional styles for the container
 * @param {boolean} isRoot - Whether the user is root (passed from parent)
 */
 
export default function TenantSelector({ selectedTenantId, onTenantChange, style = {} }) {
  const [tenants, setTenants] = useState([]);
 
  useEffect(() => {
    fetchTenants();
    // eslint-disable-next-line
  }, []);
 
  async function fetchTenants() {
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch('/tenants', {
        headers: {
          'Authorization': `Bearer ${token}`,
          'X-Tenant-Subdomain': 'admin'
        },
      });
      if (res.ok) {
        const data = await res.json();
        setTenants(Array.isArray(data) ? data : (data.tenants || []));
      }
    } catch (err) {
      setTenants([]);
    }
  }
 
  // Only allow tenants with valid UUIDs
  const uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
  const validTenants = tenants.filter(t => uuidRegex.test(String(t.tenant_id)));
  let selectedTenant = null;
  if (selectedTenantId) {
    selectedTenant = validTenants.find(t => String(t.tenant_id) === String(selectedTenantId));
  }
 
  // Detect impersonation state
  const token = localStorage.getItem('token');
  let isImpersonated = false;
  let impersonatedTenantName = '';
  if (token) {
    try {
      const payload = token.split('.')[1];
      const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
      isImpersonated = !!decoded.impersonated;
      impersonatedTenantName = decoded.impersonated_tenant_name || '';
    } catch {}
  }
 
  return (
    <div 
      className="form-section" 
      style={{ 
        marginBottom: '1.5rem', 
        backgroundColor: '#f8f9fa', 
        padding: '1rem', 
        borderRadius: '8px', 
        border: '2px solid #dee2e6',
        ...style 
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', color: '#6c757d', fontWeight: 500 }}>
          <span className="material-symbols-outlined" style={{ fontSize: '20px' }}>admin_panel_settings</span>
          <span>Root Tenant Control:</span>
        </div>
        <div style={{ flex: '1', minWidth: '250px', maxWidth: '400px' }}>
          {isImpersonated ? (
            <button
              className="btn"
              style={{ minWidth: '180px', padding: '0.5rem', borderRadius: '4px', border: '1px solid #ced4da', textAlign: 'center' }}
              onClick={async () => {
                try {
                  // Exit impersonation: call dedicated backend route
                  const token = localStorage.getItem('token');
                  const res = await apiFetch(`/auth/exit-impersonation`, {
                    method: 'POST',
                    headers: {
                      'Authorization': `Bearer ${token}`,
                      'Content-Type': 'application/json'
                    }
                  });
                  
                  if (res.ok) {
                    const data = await res.json();
                    if (data.token) {
                      localStorage.setItem('token', data.token);
                      window.location.reload();
                    } else {
                      console.error('No token in exit-impersonation response');
                      window.location.reload();
                    }
                  } else {
                    const errorText = await res.text();
                    console.error('Failed to exit impersonation:', res.status, errorText);
                    alert('Failed to exit tenant: ' + (errorText || res.statusText));
                  }
                } catch (err) {
                  console.error('Error exiting impersonation:', err);
                  alert('Error exiting tenant: ' + err.message);
                }
                }
                onTenantChange('');
              }}
            >
              Exit Tenant
            </button>
          ) : (
            <select 
              value={selectedTenantId || ''} 
              onChange={async (e) => {
                const tid = e.target.value;
                if (!tid) return; // Don't process empty selection
                
                try {
                  // Always request new JWT for impersonation
                  const token = localStorage.getItem('token');
                  const res = await apiFetch(`/auth/impersonate`, {
                    method: 'POST',
                    headers: {
                      'Authorization': `Bearer ${token}`,
                      'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ tenant_id: tid })
                  });
                  
                  if (res.ok) {
                    const data = await res.json();
                    if (data.token) {
                      localStorage.setItem('token', data.token);
                      onTenantChange(tid);
                      window.location.reload();
                    } else {
                      console.error('No token in impersonate response');
                      alert('Failed to impersonate tenant: No token received');
                    }
                  } else {
                    const errorText = await res.text();
                    console.error('Failed to impersonate:', res.status, errorText);
                    alert('Failed to impersonate tenant: ' + (errorText || res.statusText));
                  }
                } catch (err) {
                  console.error('Error impersonating tenant:', err);
                  alert('Error impersonating tenant: ' + err.message);
                }
              }}
              style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #ced4da' }}
            >
              <option value="">Root Tenant (Admin)</option>
              {validTenants.map(t => (
                <option key={t.tenant_id} value={t.tenant_id}>
                  {t.name} ({t.subdomain})
                </option>
              ))}
            </select>
          )}
        </div>
        <small style={{ color: '#6c757d', flex: '1 1 100%', marginTop: '0.25rem' }}>
          Acting on behalf of: <strong>{
            isImpersonated
              ? (impersonatedTenantName || (selectedTenant && selectedTenant.name) || `Tenant #${selectedTenantId}`)
              : selectedTenant && selectedTenant.name
                ? selectedTenant.name
                : 'Root Tenant (Admin)'
          }</strong>
        </small>
      </div>
    </div>
  );
}