typescript

frontend/src/app/SettingsRoute.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useCallback } from 'react';
+import SettingsModal from '../settings/SettingsModal';
+import { useAppShell } from '../appShellContext';
+import useApiTokens from '../settings/useApiTokens';
+import useCapabilitySets from '../settings/useCapabilitySets';
+import useCapabilities from '../settings/useCapabilities';
+import { api } from './appState';
+
+interface SettingsRouteProps {
+  open?: boolean;
+  onClose?: () => void;
+}
+
+const SettingsRoute: React.FC<SettingsRouteProps> = ({ open = true, onClose }) => {
+  const {
+    token,
+    notifyApiError,
+    setStatusMessage,
+    passkeys,
+    passkeysSupported,
+    passkeysLoading,
+    registeringPasskey,
+    revokingPasskeyId,
+    refreshPasskeys,
+    registerPasskey,
+    revokePasskey,
+  } = useAppShell() as Record<string, any>;
+
+  const {
+    tokens,
+    loading: tokensLoading,
+    creating: creatingToken,
+    deletingId,
+    regeneratingId,
+    createdSecret,
+    refresh: refreshTokens,
+    create: createToken,
+    revoke: revokeToken,
+    regenerate: regenerateToken,
+    dismissSecret,
+  } = useApiTokens({ api, token, notifyApiError, setStatusMessage });
+
+  const {
+    capabilitySets,
+    capabilitySetsLoading,
+    creatingCapabilitySet,
+    savingCapabilitySetId,
+    deletingCapabilitySetId,
+    supportsCapabilitySetLabels,
+    refreshCapabilitySets,
+    createCapabilitySet,
+    updateCapabilitySet,
+    deleteCapabilitySet,
+  } = useCapabilitySets({ api, token, notifyApiError, setStatusMessage });
+
+  const {
+    capabilities,
+    capabilitiesLoading,
+    refreshCapabilities,
+  } = useCapabilities({ api, notifyApiError, token });
+
+  useEffect(() => {
+    refreshTokens();
+    refreshCapabilitySets();
+    refreshCapabilities();
+    refreshPasskeys();
+  }, [refreshTokens, refreshCapabilitySets, refreshCapabilities, refreshPasskeys]);
+
+  const handleRefresh = useCallback(() => {
+    refreshTokens();
+    refreshCapabilitySets();
+    refreshCapabilities();
+  }, [refreshTokens, refreshCapabilitySets, refreshCapabilities]);
+
+  const handleClose = useCallback(() => {
+    dismissSecret();
+    onClose?.();
+  }, [dismissSecret, onClose]);
+
+  useEffect(() => () => {
+    dismissSecret();
+  }, [dismissSecret]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <SettingsModal
+      open={open}
+      onClose={handleClose}
+      tokens={tokens}
+      loading={tokensLoading}
+      creating={creatingToken}
+      deletingId={deletingId}
+      regeneratingId={regeneratingId}
+      onRefresh={handleRefresh}
+      onCreate={createToken}
+      onDelete={revokeToken}
+      onRegenerate={regenerateToken}
+      createdToken={createdSecret}
+      onDismissCreatedToken={dismissSecret}
+      capabilitySets={capabilitySets}
+      capabilitySetsLoading={capabilitySetsLoading}
+      creatingCapabilitySet={creatingCapabilitySet}
+      savingCapabilitySetId={savingCapabilitySetId}
+      deletingCapabilitySetId={deletingCapabilitySetId}
+      supportsCapabilitySetLabels={supportsCapabilitySetLabels}
+      onRefreshCapabilitySets={refreshCapabilitySets}
+      capabilities={capabilities}
+      capabilitiesLoading={capabilitiesLoading}
+      onRefreshCapabilities={refreshCapabilities}
+      onCreateCapabilitySet={createCapabilitySet}
+      onUpdateCapabilitySet={updateCapabilitySet}
+      onDeleteCapabilitySet={deleteCapabilitySet}
+      passkeys={passkeys}
+      passkeysSupported={passkeysSupported}
+      passkeysLoading={passkeysLoading}
+      registeringPasskey={registeringPasskey}
+      revokingPasskeyId={revokingPasskeyId}
+      onRefreshPasskeys={refreshPasskeys}
+      onRegisterPasskey={registerPasskey}
+      onRevokePasskey={revokePasskey}
+    />
+  );
+};
+
+export default SettingsRoute;