429 lines
14 KiB
TypeScript
429 lines
14 KiB
TypeScript
/**
|
||
* ConnectionsPage
|
||
*
|
||
* Page for managing OAuth connections (Google, Microsoft) using FormGeneratorTable.
|
||
* Follows the pattern established in AdminUsersPage/WorkflowsPage.
|
||
*/
|
||
|
||
import React, { useState, useMemo, useEffect } from 'react';
|
||
import { useConnections, type Connection } from '../../hooks/useConnections';
|
||
import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
|
||
import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
|
||
import { FaSync, FaPlug, FaGoogle, FaMicrosoft, FaLink, FaRedo, FaShieldAlt, FaTasks } from 'react-icons/fa';
|
||
import { getApiBaseUrl } from '../../../config/config';
|
||
import styles from '../admin/Admin.module.css';
|
||
|
||
export const ConnectionsPage: React.FC = () => {
|
||
// Use the consolidated hook
|
||
const {
|
||
data: connections,
|
||
attributes,
|
||
permissions,
|
||
pagination,
|
||
loading,
|
||
error,
|
||
refetch,
|
||
fetchConnectionById,
|
||
updateOptimistically,
|
||
deleteConnection,
|
||
handleInlineUpdate,
|
||
createGoogleConnectionAndAuth,
|
||
createMicrosoftConnectionAndAuth,
|
||
createClickupConnectionAndAuth,
|
||
connectWithPopup,
|
||
refreshMicrosoftToken,
|
||
refreshGoogleToken,
|
||
isConnecting,
|
||
} = useConnections();
|
||
|
||
const [editingConnection, setEditingConnection] = useState<Connection | null>(null);
|
||
const [deletingConnections, setDeletingConnections] = useState<Set<string>>(new Set());
|
||
const [refreshingConnections, setRefreshingConnections] = useState<Set<string>>(new Set());
|
||
const [adminConsentPending, setAdminConsentPending] = useState(false);
|
||
|
||
// Initial fetch
|
||
useEffect(() => {
|
||
refetch();
|
||
}, []);
|
||
|
||
// Generate columns from attributes - hide internal/redundant fields
|
||
const columns = useMemo(() => {
|
||
const hiddenColumns = ['id', 'externalId', 'tokenStatus', 'tokenExpiresAt', 'grantedScopes'];
|
||
|
||
return (attributes || [])
|
||
.filter(attr => !hiddenColumns.includes(attr.name))
|
||
.map(attr => {
|
||
const col: any = {
|
||
key: attr.name,
|
||
label: attr.label || attr.name,
|
||
type: attr.type as any,
|
||
sortable: attr.sortable !== false,
|
||
filterable: attr.filterable !== false,
|
||
searchable: attr.searchable !== false,
|
||
width: attr.width || 150,
|
||
minWidth: attr.minWidth || 100,
|
||
maxWidth: attr.maxWidth || 400,
|
||
fkSource: (attr as any).fkSource,
|
||
fkDisplayField: (attr as any).fkDisplayField,
|
||
};
|
||
|
||
// Resolve userId to username via FK
|
||
if (attr.name === 'userId') {
|
||
col.fkSource = '/api/users/';
|
||
col.fkDisplayField = 'username';
|
||
col.label = 'User';
|
||
}
|
||
|
||
return col;
|
||
});
|
||
}, [attributes]);
|
||
|
||
// Check permissions
|
||
const canCreate = permissions?.create !== 'n';
|
||
const canUpdate = permissions?.update !== 'n';
|
||
const canDelete = permissions?.delete !== 'n';
|
||
|
||
// Handle edit click
|
||
const handleEditClick = async (connection: Connection) => {
|
||
const fullConnection = await fetchConnectionById(connection.id);
|
||
if (fullConnection) {
|
||
setEditingConnection(fullConnection as Connection);
|
||
}
|
||
};
|
||
|
||
// Handle edit submit
|
||
const handleEditSubmit = async (data: Partial<Connection>) => {
|
||
if (!editingConnection) return;
|
||
// Note: updateConnection is handled through the hook
|
||
try {
|
||
// Ensure authority is properly typed - filter and validate authority value
|
||
const updateData: Partial<import('../../api/connectionApi').Connection> = { ...data };
|
||
|
||
// Validate and set authority if present
|
||
if (data.authority) {
|
||
if (
|
||
data.authority === 'local' ||
|
||
data.authority === 'google' ||
|
||
data.authority === 'msft' ||
|
||
data.authority === 'clickup'
|
||
) {
|
||
updateData.authority = data.authority;
|
||
} else {
|
||
// Remove invalid authority value
|
||
delete (updateData as any).authority;
|
||
}
|
||
}
|
||
|
||
await handleInlineUpdate(editingConnection.id, updateData, editingConnection);
|
||
setEditingConnection(null);
|
||
refetch();
|
||
} catch (error) {
|
||
console.error('Error updating connection:', error);
|
||
}
|
||
};
|
||
|
||
// Handle delete (confirmation handled by DeleteActionButton)
|
||
const handleDelete = async (connection: Connection) => {
|
||
setDeletingConnections(prev => new Set(prev).add(connection.id));
|
||
try {
|
||
await deleteConnection(connection.id);
|
||
refetch();
|
||
} catch (error) {
|
||
console.error('Error deleting connection:', error);
|
||
} finally {
|
||
setDeletingConnections(prev => {
|
||
const newSet = new Set(prev);
|
||
newSet.delete(connection.id);
|
||
return newSet;
|
||
});
|
||
}
|
||
};
|
||
|
||
// Handle connect
|
||
const handleConnect = async (connection: Connection) => {
|
||
try {
|
||
await connectWithPopup(connection.id);
|
||
refetch();
|
||
} catch (error) {
|
||
console.error('Error connecting:', error);
|
||
}
|
||
};
|
||
|
||
// Handle refresh token
|
||
const handleRefresh = async (connection: Connection) => {
|
||
setRefreshingConnections(prev => new Set(prev).add(connection.id));
|
||
try {
|
||
if (connection.authority === 'msft') {
|
||
await refreshMicrosoftToken(connection.id);
|
||
} else if (connection.authority === 'google') {
|
||
await refreshGoogleToken(connection.id);
|
||
}
|
||
refetch();
|
||
} catch (error) {
|
||
console.error('Error refreshing token:', error);
|
||
} finally {
|
||
setRefreshingConnections(prev => {
|
||
const newSet = new Set(prev);
|
||
newSet.delete(connection.id);
|
||
return newSet;
|
||
});
|
||
}
|
||
};
|
||
|
||
// Handle create Google connection
|
||
const handleCreateGoogle = async () => {
|
||
try {
|
||
await createGoogleConnectionAndAuth();
|
||
refetch();
|
||
} catch (error) {
|
||
console.error('Error creating Google connection:', error);
|
||
}
|
||
};
|
||
|
||
// Handle create Microsoft connection
|
||
const handleCreateMicrosoft = async () => {
|
||
try {
|
||
await createMicrosoftConnectionAndAuth();
|
||
refetch();
|
||
} catch (error) {
|
||
console.error('Error creating Microsoft connection:', error);
|
||
}
|
||
};
|
||
|
||
// Handle create ClickUp connection
|
||
const handleCreateClickup = async () => {
|
||
try {
|
||
await createClickupConnectionAndAuth();
|
||
refetch();
|
||
} catch (error) {
|
||
console.error('Error creating ClickUp connection:', error);
|
||
}
|
||
};
|
||
|
||
// Open Microsoft Admin Consent flow in a popup
|
||
const handleAdminConsent = () => {
|
||
setAdminConsentPending(true);
|
||
const consentUrl = `${getApiBaseUrl()}/api/msft/adminconsent`;
|
||
const popup = window.open(consentUrl, 'msft-admin-consent', 'width=600,height=700,scrollbars=yes,resizable=yes');
|
||
if (!popup) {
|
||
setAdminConsentPending(false);
|
||
return;
|
||
}
|
||
const checkClosed = setInterval(() => {
|
||
if (popup.closed) {
|
||
clearInterval(checkClosed);
|
||
setAdminConsentPending(false);
|
||
refetch();
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
// Form attributes for edit modal
|
||
const formAttributes = useMemo(() => {
|
||
const excludedFields = ['id', 'mandateId', 'userId', 'sysCreatedBy', 'sysCreatedAt', 'sysModifiedAt', 'connectedAt', 'lastChecked'];
|
||
return (attributes || [])
|
||
.filter(attr => !excludedFields.includes(attr.name));
|
||
}, [attributes]);
|
||
|
||
if (error) {
|
||
return (
|
||
<div className={styles.adminPage}>
|
||
<div className={styles.errorContainer}>
|
||
<span className={styles.errorIcon}>⚠️</span>
|
||
<p className={styles.errorMessage}>Fehler beim Laden der Verbindungen: {error}</p>
|
||
<button className={styles.secondaryButton} onClick={() => refetch()}>
|
||
<FaSync /> Erneut versuchen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className={`${styles.adminPage} ${styles.adminPageFill}`}>
|
||
<div className={styles.pageHeader}>
|
||
<div>
|
||
<h1 className={styles.pageTitle}>Verbindungen</h1>
|
||
<p className={styles.pageSubtitle}>
|
||
Persönliche Datenanbindungen verwalten (OAuth: Google, Microsoft, ClickUp)
|
||
</p>
|
||
</div>
|
||
<div className={styles.headerActions}>
|
||
<button
|
||
className={styles.secondaryButton}
|
||
onClick={handleAdminConsent}
|
||
disabled={adminConsentPending}
|
||
title="Microsoft Admin Consent — erteilt der App die nötigen Berechtigungen für den gesamten Tenant"
|
||
>
|
||
<FaShieldAlt /> Admin Consent
|
||
</button>
|
||
<button
|
||
className={styles.secondaryButton}
|
||
onClick={() => refetch()}
|
||
disabled={loading}
|
||
>
|
||
<FaSync className={loading ? 'spinning' : ''} /> Aktualisieren
|
||
</button>
|
||
{canCreate && (
|
||
<>
|
||
<button
|
||
className={styles.googleButton}
|
||
onClick={handleCreateGoogle}
|
||
disabled={isConnecting}
|
||
>
|
||
<FaGoogle /> Google
|
||
</button>
|
||
<button
|
||
className={styles.primaryButton}
|
||
onClick={handleCreateMicrosoft}
|
||
disabled={isConnecting}
|
||
>
|
||
<FaMicrosoft /> Microsoft
|
||
</button>
|
||
<button
|
||
className={styles.clickupButton}
|
||
onClick={handleCreateClickup}
|
||
disabled={isConnecting}
|
||
title="ClickUp-Konto verbinden"
|
||
>
|
||
<FaTasks /> ClickUp
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className={styles.tableContainer}>
|
||
{loading && (!connections || connections.length === 0) ? (
|
||
<div className={styles.loadingContainer}>
|
||
<div className={styles.spinner} />
|
||
<span>Lade Verbindungen...</span>
|
||
</div>
|
||
) : !connections || connections.length === 0 ? (
|
||
<div className={styles.emptyState}>
|
||
<FaPlug className={styles.emptyIcon} />
|
||
<h3 className={styles.emptyTitle}>Keine Verbindungen vorhanden</h3>
|
||
<p className={styles.emptyDescription}>
|
||
Verbinden Sie Ihr Google-, Microsoft- oder ClickUp-Konto, um loszulegen.
|
||
</p>
|
||
{canCreate && (
|
||
<div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center', flexWrap: 'wrap' }}>
|
||
<button
|
||
className={styles.googleButton}
|
||
onClick={handleCreateGoogle}
|
||
disabled={isConnecting}
|
||
>
|
||
<FaGoogle /> Mit Google verbinden
|
||
</button>
|
||
<button
|
||
className={styles.primaryButton}
|
||
onClick={handleCreateMicrosoft}
|
||
disabled={isConnecting}
|
||
>
|
||
<FaMicrosoft /> Mit Microsoft verbinden
|
||
</button>
|
||
<button
|
||
className={styles.clickupButton}
|
||
onClick={handleCreateClickup}
|
||
disabled={isConnecting}
|
||
>
|
||
<FaTasks /> Mit ClickUp verbinden
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<FormGeneratorTable
|
||
data={connections}
|
||
columns={columns}
|
||
apiEndpoint="/api/connections/"
|
||
loading={loading}
|
||
pagination={true}
|
||
pageSize={25}
|
||
searchable={true}
|
||
filterable={true}
|
||
sortable={true}
|
||
selectable={false}
|
||
actionButtons={[
|
||
...(canUpdate ? [{
|
||
type: 'edit' as const,
|
||
onAction: handleEditClick,
|
||
title: 'Bearbeiten',
|
||
}] : []),
|
||
...(canDelete ? [{
|
||
type: 'delete' as const,
|
||
title: 'Löschen',
|
||
loading: (row: Connection) => deletingConnections.has(row.id),
|
||
}] : []),
|
||
]}
|
||
customActions={[
|
||
{
|
||
id: 'connect',
|
||
icon: <FaLink />,
|
||
onClick: handleConnect,
|
||
title: 'Verbinden',
|
||
visible: (row: Connection) => row.status !== 'active',
|
||
loading: () => isConnecting,
|
||
},
|
||
{
|
||
id: 'refresh',
|
||
icon: <FaRedo />,
|
||
onClick: handleRefresh,
|
||
title: 'Token erneuern',
|
||
visible: (row: Connection) => row.status === 'active',
|
||
loading: (row: Connection) => refreshingConnections.has(row.id),
|
||
},
|
||
]}
|
||
onDelete={handleDelete}
|
||
hookData={{
|
||
refetch,
|
||
permissions,
|
||
pagination,
|
||
handleDelete: deleteConnection,
|
||
handleInlineUpdate,
|
||
updateOptimistically,
|
||
}}
|
||
emptyMessage="Keine Verbindungen gefunden"
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* Edit Modal */}
|
||
{editingConnection && (
|
||
<div className={styles.modalOverlay} onClick={() => setEditingConnection(null)}>
|
||
<div className={styles.modal} onClick={e => e.stopPropagation()}>
|
||
<div className={styles.modalHeader}>
|
||
<h2 className={styles.modalTitle}>Verbindung bearbeiten</h2>
|
||
<button
|
||
className={styles.modalClose}
|
||
onClick={() => setEditingConnection(null)}
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
<div className={styles.modalContent}>
|
||
{formAttributes.length === 0 ? (
|
||
<div className={styles.loadingContainer}>
|
||
<div className={styles.spinner} />
|
||
<span>Lade Formular...</span>
|
||
</div>
|
||
) : (
|
||
<FormGeneratorForm
|
||
attributes={formAttributes}
|
||
data={editingConnection}
|
||
mode="edit"
|
||
onSubmit={handleEditSubmit}
|
||
onCancel={() => setEditingConnection(null)}
|
||
submitButtonText="Speichern"
|
||
cancelButtonText="Abbrechen"
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ConnectionsPage;
|