feat(#94): implement spoke configuration UI
Implements the final piece of M7-Federation - the spoke configuration UI that allows administrators to configure their local instance's federation capabilities and settings. Backend Changes: - Add UpdateInstanceDto with validation for name, capabilities, and metadata - Implement FederationService.updateInstanceConfiguration() method - Add PATCH /api/v1/federation/instance endpoint to FederationController - Add audit logging for configuration updates - Add tests for updateInstanceConfiguration (5 new tests, all passing) Frontend Changes: - Create SpokeConfigurationForm component with PDA-friendly design - Create /federation/settings page with configuration management - Add regenerate keypair functionality with confirmation dialog - Extend federation API client with updateInstanceConfiguration and regenerateInstanceKeys - Add comprehensive tests (10 tests, all passing) Design Decisions: - Admin-only access via AdminGuard - Never expose private key in API responses (security) - PDA-friendly language throughout (no demanding terms) - Clear visual hierarchy with read-only and editable fields - Truncated public key with copy button for usability - Confirmation dialog for destructive key regeneration All tests passing: - Backend: 13/13 federation service tests passing - Frontend: 10/10 SpokeConfigurationForm tests passing - TypeScript compilation: passing - Linting: passing - PDA-friendliness: verified This completes M7-Federation. All federation features are now implemented. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
@@ -25,6 +25,25 @@ export class FederationAuditService {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Log instance configuration update (system-level operation)
|
||||
* Logged to application logs for security audit trail
|
||||
*/
|
||||
logInstanceConfigurationUpdate(
|
||||
userId: string,
|
||||
instanceId: string,
|
||||
updates: Record<string, unknown>
|
||||
): void {
|
||||
this.logger.log({
|
||||
event: "FEDERATION_INSTANCE_CONFIG_UPDATED",
|
||||
userId,
|
||||
instanceId,
|
||||
updates,
|
||||
timestamp: new Date().toISOString(),
|
||||
securityEvent: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Log federated authentication initiation
|
||||
*/
|
||||
|
||||
46
apps/api/src/federation/dto/instance.dto.ts
Normal file
46
apps/api/src/federation/dto/instance.dto.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* Instance Configuration DTOs
|
||||
*
|
||||
* Data Transfer Objects for instance configuration API.
|
||||
*/
|
||||
|
||||
import { IsString, IsBoolean, IsOptional, IsObject, ValidateNested } from "class-validator";
|
||||
import { Type } from "class-transformer";
|
||||
|
||||
/**
|
||||
* DTO for federation capabilities
|
||||
*/
|
||||
export class FederationCapabilitiesDto {
|
||||
@IsBoolean()
|
||||
supportsQuery!: boolean;
|
||||
|
||||
@IsBoolean()
|
||||
supportsCommand!: boolean;
|
||||
|
||||
@IsBoolean()
|
||||
supportsEvent!: boolean;
|
||||
|
||||
@IsBoolean()
|
||||
supportsAgentSpawn!: boolean;
|
||||
|
||||
@IsString()
|
||||
protocolVersion!: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* DTO for updating instance configuration
|
||||
*/
|
||||
export class UpdateInstanceDto {
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
name?: string;
|
||||
|
||||
@IsOptional()
|
||||
@ValidateNested()
|
||||
@Type(() => FederationCapabilitiesDto)
|
||||
capabilities?: FederationCapabilitiesDto;
|
||||
|
||||
@IsOptional()
|
||||
@IsObject()
|
||||
metadata?: Record<string, unknown>;
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import { FederationController } from "./federation.controller";
|
||||
import { FederationService } from "./federation.service";
|
||||
import { FederationAuditService } from "./audit.service";
|
||||
import { ConnectionService } from "./connection.service";
|
||||
import { FederationAgentService } from "./federation-agent.service";
|
||||
import { AuthGuard } from "../auth/guards/auth.guard";
|
||||
import { AdminGuard } from "../auth/guards/admin.guard";
|
||||
import { FederationConnectionStatus } from "@prisma/client";
|
||||
@@ -88,6 +89,14 @@ describe("FederationController", () => {
|
||||
handleIncomingConnectionRequest: vi.fn(),
|
||||
},
|
||||
},
|
||||
{
|
||||
provide: FederationAgentService,
|
||||
useValue: {
|
||||
spawnAgentOnRemote: vi.fn(),
|
||||
getAgentStatus: vi.fn(),
|
||||
killAgentOnRemote: vi.fn(),
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
.overrideGuard(AuthGuard)
|
||||
|
||||
@@ -4,7 +4,18 @@
|
||||
* API endpoints for instance identity and federation management.
|
||||
*/
|
||||
|
||||
import { Controller, Get, Post, UseGuards, Logger, Req, Body, Param, Query } from "@nestjs/common";
|
||||
import {
|
||||
Controller,
|
||||
Get,
|
||||
Post,
|
||||
Patch,
|
||||
UseGuards,
|
||||
Logger,
|
||||
Req,
|
||||
Body,
|
||||
Param,
|
||||
Query,
|
||||
} from "@nestjs/common";
|
||||
import { FederationService } from "./federation.service";
|
||||
import { FederationAuditService } from "./audit.service";
|
||||
import { ConnectionService } from "./connection.service";
|
||||
@@ -22,6 +33,7 @@ import {
|
||||
DisconnectConnectionDto,
|
||||
IncomingConnectionRequestDto,
|
||||
} from "./dto/connection.dto";
|
||||
import { UpdateInstanceDto } from "./dto/instance.dto";
|
||||
import type { SpawnAgentCommandPayload } from "./types/federation-agent.types";
|
||||
import { FederationConnectionStatus } from "@prisma/client";
|
||||
|
||||
@@ -68,6 +80,36 @@ export class FederationController {
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update instance configuration
|
||||
* Requires system administrator privileges
|
||||
* Allows updating name, capabilities, and metadata
|
||||
* Returns public identity only (private key never exposed in API)
|
||||
*/
|
||||
@Patch("instance")
|
||||
@UseGuards(AuthGuard, AdminGuard)
|
||||
async updateInstanceConfiguration(
|
||||
@Req() req: AuthenticatedRequest,
|
||||
@Body() dto: UpdateInstanceDto
|
||||
): Promise<PublicInstanceIdentity> {
|
||||
if (!req.user) {
|
||||
throw new Error("User not authenticated");
|
||||
}
|
||||
|
||||
this.logger.log(`Admin user ${req.user.id} updating instance configuration`);
|
||||
|
||||
const result = await this.federationService.updateInstanceConfiguration(dto);
|
||||
|
||||
// Audit log for security compliance
|
||||
const auditData: Record<string, unknown> = {};
|
||||
if (dto.name !== undefined) auditData.name = dto.name;
|
||||
if (dto.capabilities !== undefined) auditData.capabilities = dto.capabilities;
|
||||
if (dto.metadata !== undefined) auditData.metadata = dto.metadata;
|
||||
this.auditService.logInstanceConfigurationUpdate(req.user.id, result.instanceId, auditData);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initiate a connection to a remote instance
|
||||
* Requires authentication
|
||||
|
||||
@@ -228,4 +228,126 @@ describe("FederationService", () => {
|
||||
expect(result).toHaveProperty("instanceId");
|
||||
});
|
||||
});
|
||||
|
||||
describe("updateInstanceConfiguration", () => {
|
||||
it("should update instance name", async () => {
|
||||
// Arrange
|
||||
const updatedInstance = { ...mockInstance, name: "Updated Instance" };
|
||||
vi.spyOn(service, "getInstanceIdentity").mockResolvedValue({
|
||||
...mockInstance,
|
||||
privateKey: mockDecryptedPrivateKey,
|
||||
});
|
||||
vi.spyOn(prismaService.instance, "update").mockResolvedValue(updatedInstance);
|
||||
|
||||
// Act
|
||||
const result = await service.updateInstanceConfiguration({ name: "Updated Instance" });
|
||||
|
||||
// Assert
|
||||
expect(prismaService.instance.update).toHaveBeenCalledWith({
|
||||
where: { id: mockInstance.id },
|
||||
data: { name: "Updated Instance" },
|
||||
});
|
||||
expect(result.name).toBe("Updated Instance");
|
||||
expect(result).not.toHaveProperty("privateKey");
|
||||
});
|
||||
|
||||
it("should update instance capabilities", async () => {
|
||||
// Arrange
|
||||
const newCapabilities = {
|
||||
supportsQuery: true,
|
||||
supportsCommand: false,
|
||||
supportsEvent: true,
|
||||
supportsAgentSpawn: false,
|
||||
protocolVersion: "1.0",
|
||||
};
|
||||
const updatedInstance = { ...mockInstance, capabilities: newCapabilities };
|
||||
vi.spyOn(service, "getInstanceIdentity").mockResolvedValue({
|
||||
...mockInstance,
|
||||
privateKey: mockDecryptedPrivateKey,
|
||||
});
|
||||
vi.spyOn(prismaService.instance, "update").mockResolvedValue(updatedInstance);
|
||||
|
||||
// Act
|
||||
const result = await service.updateInstanceConfiguration({ capabilities: newCapabilities });
|
||||
|
||||
// Assert
|
||||
expect(prismaService.instance.update).toHaveBeenCalledWith({
|
||||
where: { id: mockInstance.id },
|
||||
data: { capabilities: newCapabilities },
|
||||
});
|
||||
expect(result.capabilities).toEqual(newCapabilities);
|
||||
});
|
||||
|
||||
it("should update instance metadata", async () => {
|
||||
// Arrange
|
||||
const newMetadata = { description: "Test description", region: "us-west-2" };
|
||||
const updatedInstance = { ...mockInstance, metadata: newMetadata };
|
||||
vi.spyOn(service, "getInstanceIdentity").mockResolvedValue({
|
||||
...mockInstance,
|
||||
privateKey: mockDecryptedPrivateKey,
|
||||
});
|
||||
vi.spyOn(prismaService.instance, "update").mockResolvedValue(updatedInstance);
|
||||
|
||||
// Act
|
||||
const result = await service.updateInstanceConfiguration({ metadata: newMetadata });
|
||||
|
||||
// Assert
|
||||
expect(prismaService.instance.update).toHaveBeenCalledWith({
|
||||
where: { id: mockInstance.id },
|
||||
data: { metadata: newMetadata },
|
||||
});
|
||||
expect(result.metadata).toEqual(newMetadata);
|
||||
});
|
||||
|
||||
it("should update multiple fields at once", async () => {
|
||||
// Arrange
|
||||
const updates = {
|
||||
name: "Updated Instance",
|
||||
capabilities: {
|
||||
supportsQuery: false,
|
||||
supportsCommand: false,
|
||||
supportsEvent: false,
|
||||
supportsAgentSpawn: false,
|
||||
protocolVersion: "1.0",
|
||||
},
|
||||
metadata: { description: "Updated" },
|
||||
};
|
||||
const updatedInstance = { ...mockInstance, ...updates };
|
||||
vi.spyOn(service, "getInstanceIdentity").mockResolvedValue({
|
||||
...mockInstance,
|
||||
privateKey: mockDecryptedPrivateKey,
|
||||
});
|
||||
vi.spyOn(prismaService.instance, "update").mockResolvedValue(updatedInstance);
|
||||
|
||||
// Act
|
||||
const result = await service.updateInstanceConfiguration(updates);
|
||||
|
||||
// Assert
|
||||
expect(prismaService.instance.update).toHaveBeenCalledWith({
|
||||
where: { id: mockInstance.id },
|
||||
data: updates,
|
||||
});
|
||||
expect(result.name).toBe("Updated Instance");
|
||||
expect(result.capabilities).toEqual(updates.capabilities);
|
||||
expect(result.metadata).toEqual(updates.metadata);
|
||||
});
|
||||
|
||||
it("should not expose private key in response", async () => {
|
||||
// Arrange
|
||||
const updatedInstance = { ...mockInstance, name: "Updated" };
|
||||
vi.spyOn(service, "getInstanceIdentity").mockResolvedValue({
|
||||
...mockInstance,
|
||||
privateKey: mockDecryptedPrivateKey,
|
||||
});
|
||||
vi.spyOn(prismaService.instance, "update").mockResolvedValue(updatedInstance);
|
||||
|
||||
// Act
|
||||
const result = await service.updateInstanceConfiguration({ name: "Updated" });
|
||||
|
||||
// Assert - SECURITY: Verify private key is NOT in response
|
||||
expect(result).not.toHaveProperty("privateKey");
|
||||
expect(result).toHaveProperty("publicKey");
|
||||
expect(result).toHaveProperty("instanceId");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -104,6 +104,46 @@ export class FederationService {
|
||||
return publicIdentity;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update instance configuration
|
||||
* Allows updating name, capabilities, and metadata
|
||||
* Returns public identity only (no private key exposure)
|
||||
*/
|
||||
async updateInstanceConfiguration(updates: {
|
||||
name?: string;
|
||||
capabilities?: FederationCapabilities;
|
||||
metadata?: Record<string, unknown>;
|
||||
}): Promise<PublicInstanceIdentity> {
|
||||
const instance = await this.getInstanceIdentity();
|
||||
|
||||
// Build update data object
|
||||
const data: Prisma.InstanceUpdateInput = {};
|
||||
|
||||
if (updates.name !== undefined) {
|
||||
data.name = updates.name;
|
||||
}
|
||||
|
||||
if (updates.capabilities !== undefined) {
|
||||
data.capabilities = updates.capabilities as Prisma.JsonObject;
|
||||
}
|
||||
|
||||
if (updates.metadata !== undefined) {
|
||||
data.metadata = updates.metadata as Prisma.JsonObject;
|
||||
}
|
||||
|
||||
const updatedInstance = await this.prisma.instance.update({
|
||||
where: { id: instance.id },
|
||||
data,
|
||||
});
|
||||
|
||||
this.logger.log(`Instance configuration updated: ${JSON.stringify(updates)}`);
|
||||
|
||||
// Return public identity only (security fix)
|
||||
const identity = this.mapToInstanceIdentity(updatedInstance);
|
||||
const { privateKey: _privateKey, ...publicIdentity } = identity;
|
||||
return publicIdentity;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new instance identity
|
||||
*/
|
||||
|
||||
228
apps/web/src/app/(authenticated)/federation/settings/page.tsx
Normal file
228
apps/web/src/app/(authenticated)/federation/settings/page.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Federation Settings Page
|
||||
* Configure local instance federation settings (spoke configuration)
|
||||
* Admin-only page
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { SpokeConfigurationForm } from "@/components/federation/SpokeConfigurationForm";
|
||||
import {
|
||||
fetchInstanceIdentity,
|
||||
updateInstanceConfiguration,
|
||||
regenerateInstanceKeys,
|
||||
type PublicInstanceIdentity,
|
||||
type UpdateInstanceRequest,
|
||||
} from "@/lib/api/federation";
|
||||
|
||||
export default function FederationSettingsPage(): React.JSX.Element {
|
||||
const [instance, setInstance] = useState<PublicInstanceIdentity | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isRegenerating, setIsRegenerating] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const [showRegenerateConfirm, setShowRegenerateConfirm] = useState(false);
|
||||
|
||||
// Load instance identity on mount
|
||||
useEffect(() => {
|
||||
void loadInstance();
|
||||
}, []);
|
||||
|
||||
const loadInstance = async (): Promise<void> => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const data = await fetchInstanceIdentity();
|
||||
setInstance(data);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Unable to load instance configuration. Please try again."
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async (updates: UpdateInstanceRequest): Promise<void> => {
|
||||
setIsSaving(true);
|
||||
setSaveError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
try {
|
||||
const updatedInstance = await updateInstanceConfiguration(updates);
|
||||
setInstance(updatedInstance);
|
||||
setSuccessMessage("Configuration saved successfully");
|
||||
|
||||
// Clear success message after 3 seconds
|
||||
setTimeout(() => {
|
||||
setSuccessMessage(null);
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
setSaveError(
|
||||
err instanceof Error ? err.message : "Unable to save configuration. Please try again."
|
||||
);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegenerateKeys = async (): Promise<void> => {
|
||||
setIsRegenerating(true);
|
||||
setSaveError(null);
|
||||
setSuccessMessage(null);
|
||||
|
||||
try {
|
||||
const updatedInstance = await regenerateInstanceKeys();
|
||||
setInstance(updatedInstance);
|
||||
setSuccessMessage("Instance keypair regenerated successfully");
|
||||
setShowRegenerateConfirm(false);
|
||||
|
||||
// Clear success message after 3 seconds
|
||||
setTimeout(() => {
|
||||
setSuccessMessage(null);
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
setSaveError(
|
||||
err instanceof Error ? err.message : "Unable to regenerate keys. Please try again."
|
||||
);
|
||||
} finally {
|
||||
setIsRegenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Loading state
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-8">Federation Settings</h1>
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-8 text-center">
|
||||
<div className="text-gray-600">Loading configuration...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (error) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-8">Federation Settings</h1>
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-8">
|
||||
<h2 className="text-lg font-semibold text-red-900 mb-2">
|
||||
Unable to Load Configuration
|
||||
</h2>
|
||||
<p className="text-red-700">{error}</p>
|
||||
<button
|
||||
onClick={() => void loadInstance()}
|
||||
className="mt-4 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// No instance (shouldn't happen, but handle gracefully)
|
||||
if (!instance) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-8">Federation Settings</h1>
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-8 text-center">
|
||||
<div className="text-gray-600">No instance configuration found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Federation Settings</h1>
|
||||
<p className="text-gray-600">
|
||||
Configure your instance's federation capabilities and identity. These settings determine
|
||||
how your instance interacts with other Mosaic Stack instances.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Success Message */}
|
||||
{successMessage && (
|
||||
<div className="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Configuration Form */}
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-6">
|
||||
<SpokeConfigurationForm
|
||||
instance={instance}
|
||||
onSave={handleSave}
|
||||
isLoading={isSaving}
|
||||
{...(saveError && { error: saveError })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Advanced Section: Regenerate Keys */}
|
||||
<div className="mt-8 bg-white border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Advanced</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Regenerating your instance's keypair will invalidate all existing federation
|
||||
connections. Connected instances will need to re-establish connections with your new
|
||||
public key.
|
||||
</p>
|
||||
|
||||
{showRegenerateConfirm ? (
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
||||
<h4 className="font-medium text-yellow-900 mb-2">Confirm Keypair Regeneration</h4>
|
||||
<p className="text-sm text-yellow-800 mb-4">
|
||||
This action will disconnect all federated instances. They will need to reconnect
|
||||
using your new public key. This action cannot be undone.
|
||||
</p>
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={() => void handleRegenerateKeys()}
|
||||
disabled={isRegenerating}
|
||||
className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isRegenerating ? "Regenerating..." : "Confirm Regenerate"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowRegenerateConfirm(false);
|
||||
}}
|
||||
disabled={isRegenerating}
|
||||
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowRegenerateConfirm(true);
|
||||
}}
|
||||
className="px-4 py-2 border border-yellow-600 text-yellow-700 rounded-lg hover:bg-yellow-50 transition-colors"
|
||||
>
|
||||
Regenerate Keypair
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
/**
|
||||
* Tests for SpokeConfigurationForm Component
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
import { SpokeConfigurationForm } from "./SpokeConfigurationForm";
|
||||
import type { PublicInstanceIdentity } from "@/lib/api/federation";
|
||||
|
||||
describe("SpokeConfigurationForm", () => {
|
||||
const mockInstance: PublicInstanceIdentity = {
|
||||
id: "instance-123",
|
||||
instanceId: "test-instance-001",
|
||||
name: "Test Instance",
|
||||
url: "https://test.example.com",
|
||||
publicKey: "-----BEGIN PUBLIC KEY-----\nMOCKPUBLICKEY\n-----END PUBLIC KEY-----",
|
||||
capabilities: {
|
||||
supportsQuery: true,
|
||||
supportsCommand: true,
|
||||
supportsEvent: true,
|
||||
supportsAgentSpawn: false,
|
||||
protocolVersion: "1.0",
|
||||
},
|
||||
metadata: {
|
||||
description: "Test instance description",
|
||||
},
|
||||
createdAt: "2026-02-01T00:00:00Z",
|
||||
updatedAt: "2026-02-01T00:00:00Z",
|
||||
};
|
||||
|
||||
it("should render instance identity information", () => {
|
||||
const onSave = vi.fn();
|
||||
render(<SpokeConfigurationForm instance={mockInstance} onSave={onSave} />);
|
||||
|
||||
expect(screen.getByDisplayValue("Test Instance")).toBeInTheDocument();
|
||||
expect(screen.getByText("test-instance-001")).toBeInTheDocument();
|
||||
expect(screen.getByText("https://test.example.com")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render capability toggles with correct initial state", () => {
|
||||
const onSave = vi.fn();
|
||||
render(<SpokeConfigurationForm instance={mockInstance} onSave={onSave} />);
|
||||
|
||||
const queryToggle = screen.getByLabelText(/Query Support/i);
|
||||
const commandToggle = screen.getByLabelText(/Command Support/i);
|
||||
const eventToggle = screen.getByLabelText(/Event Support/i);
|
||||
const agentToggle = screen.getByLabelText(/Agent Spawn Support/i);
|
||||
|
||||
expect(queryToggle).toBeChecked();
|
||||
expect(commandToggle).toBeChecked();
|
||||
expect(eventToggle).toBeChecked();
|
||||
expect(agentToggle).not.toBeChecked();
|
||||
});
|
||||
|
||||
it("should allow editing instance name", async () => {
|
||||
const onSave = vi.fn();
|
||||
render(<SpokeConfigurationForm instance={mockInstance} onSave={onSave} />);
|
||||
|
||||
const nameInput = screen.getByDisplayValue("Test Instance");
|
||||
fireEvent.change(nameInput, { target: { value: "Updated Instance" } });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByDisplayValue("Updated Instance")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("should toggle capabilities", async () => {
|
||||
const onSave = vi.fn();
|
||||
render(<SpokeConfigurationForm instance={mockInstance} onSave={onSave} />);
|
||||
|
||||
const agentToggle = screen.getByLabelText(/Agent Spawn Support/i);
|
||||
expect(agentToggle).not.toBeChecked();
|
||||
|
||||
fireEvent.click(agentToggle);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(agentToggle).toBeChecked();
|
||||
});
|
||||
});
|
||||
|
||||
it("should call onSave with updated configuration", async () => {
|
||||
const onSave = vi.fn();
|
||||
render(<SpokeConfigurationForm instance={mockInstance} onSave={onSave} />);
|
||||
|
||||
// Change name
|
||||
const nameInput = screen.getByDisplayValue("Test Instance");
|
||||
fireEvent.change(nameInput, { target: { value: "Updated Instance" } });
|
||||
|
||||
// Toggle agent spawn
|
||||
const agentToggle = screen.getByLabelText(/Agent Spawn Support/i);
|
||||
fireEvent.click(agentToggle);
|
||||
|
||||
// Click save
|
||||
const saveButton = screen.getByText("Save Configuration");
|
||||
fireEvent.click(saveButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onSave).toHaveBeenCalledWith({
|
||||
name: "Updated Instance",
|
||||
capabilities: {
|
||||
supportsQuery: true,
|
||||
supportsCommand: true,
|
||||
supportsEvent: true,
|
||||
supportsAgentSpawn: true,
|
||||
protocolVersion: "1.0",
|
||||
},
|
||||
metadata: {
|
||||
description: "Test instance description",
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it("should display loading state when saving", () => {
|
||||
const onSave = vi.fn();
|
||||
render(<SpokeConfigurationForm instance={mockInstance} onSave={onSave} isLoading={true} />);
|
||||
|
||||
const saveButton = screen.getByText("Saving...");
|
||||
expect(saveButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it("should display error message when provided", () => {
|
||||
const onSave = vi.fn();
|
||||
render(
|
||||
<SpokeConfigurationForm
|
||||
instance={mockInstance}
|
||||
onSave={onSave}
|
||||
error="Unable to save configuration"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Unable to save configuration")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should use PDA-friendly language in help text", () => {
|
||||
const onSave = vi.fn();
|
||||
render(<SpokeConfigurationForm instance={mockInstance} onSave={onSave} />);
|
||||
|
||||
// Should NOT use demanding language
|
||||
expect(screen.queryByText(/must/i)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/required/i)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/critical/i)).not.toBeInTheDocument();
|
||||
|
||||
// Should use friendly language (multiple instances expected)
|
||||
const friendlyText = screen.getAllByText(/Allows connected instances/i);
|
||||
expect(friendlyText.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("should truncate public key and show copy button", () => {
|
||||
const onSave = vi.fn();
|
||||
render(<SpokeConfigurationForm instance={mockInstance} onSave={onSave} />);
|
||||
|
||||
// Public key should be truncated
|
||||
expect(screen.getByText(/-----BEGIN PUBLIC KEY-----/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Copy/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should handle cancel action", async () => {
|
||||
const onSave = vi.fn();
|
||||
const onCancel = vi.fn();
|
||||
render(<SpokeConfigurationForm instance={mockInstance} onSave={onSave} onCancel={onCancel} />);
|
||||
|
||||
const cancelButton = screen.getByText("Cancel");
|
||||
fireEvent.click(cancelButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onCancel).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
276
apps/web/src/components/federation/SpokeConfigurationForm.tsx
Normal file
276
apps/web/src/components/federation/SpokeConfigurationForm.tsx
Normal file
@@ -0,0 +1,276 @@
|
||||
/**
|
||||
* SpokeConfigurationForm Component
|
||||
* Allows administrators to configure local instance federation settings
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import type { PublicInstanceIdentity, UpdateInstanceRequest } from "@/lib/api/federation";
|
||||
|
||||
interface SpokeConfigurationFormProps {
|
||||
instance: PublicInstanceIdentity;
|
||||
onSave: (updates: UpdateInstanceRequest) => void;
|
||||
onCancel?: () => void;
|
||||
isLoading?: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function SpokeConfigurationForm({
|
||||
instance,
|
||||
onSave,
|
||||
onCancel,
|
||||
isLoading = false,
|
||||
error,
|
||||
}: SpokeConfigurationFormProps): React.JSX.Element {
|
||||
const [name, setName] = useState(instance.name);
|
||||
const [description, setDescription] = useState((instance.metadata.description as string) || "");
|
||||
const [capabilities, setCapabilities] = useState(instance.capabilities);
|
||||
|
||||
const handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>): void => {
|
||||
e.preventDefault();
|
||||
|
||||
const updates: UpdateInstanceRequest = {
|
||||
name,
|
||||
capabilities,
|
||||
metadata: {
|
||||
...instance.metadata,
|
||||
description,
|
||||
},
|
||||
};
|
||||
|
||||
onSave(updates);
|
||||
};
|
||||
|
||||
const handleCapabilityToggle = (capability: keyof typeof capabilities): void => {
|
||||
if (capability === "protocolVersion") return; // Can't toggle protocol version
|
||||
|
||||
setCapabilities((prev) => ({
|
||||
...prev,
|
||||
[capability]: !prev[capability],
|
||||
}));
|
||||
};
|
||||
|
||||
const copyPublicKey = async (): Promise<void> => {
|
||||
await navigator.clipboard.writeText(instance.publicKey);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Instance Identity Section */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium text-gray-900">Instance Identity</h3>
|
||||
|
||||
{/* Instance ID (Read-only) */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Instance ID</label>
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-gray-600">
|
||||
{instance.instanceId}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Instance URL (Read-only) */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Instance URL</label>
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-gray-600">
|
||||
{instance.url}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Instance Name (Editable) */}
|
||||
<div>
|
||||
<label htmlFor="instance-name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Instance Name
|
||||
</label>
|
||||
<input
|
||||
id="instance-name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
setName(e.target.value);
|
||||
}}
|
||||
disabled={isLoading}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:text-gray-500"
|
||||
/>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
This name helps identify your instance in federation connections
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Description (Editable) */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="instance-description"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="instance-description"
|
||||
value={description}
|
||||
onChange={(e) => {
|
||||
setDescription(e.target.value);
|
||||
}}
|
||||
disabled={isLoading}
|
||||
rows={3}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:text-gray-500"
|
||||
placeholder="Optional description for this instance"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Public Key (Read-only with copy button) */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Public Key</label>
|
||||
<div className="relative">
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-gray-600 font-mono text-xs overflow-hidden">
|
||||
{instance.publicKey.substring(0, 100)}...
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={copyPublicKey}
|
||||
className="absolute top-2 right-2 px-2 py-1 text-xs bg-white border border-gray-300 rounded hover:bg-gray-50"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Federation Capabilities Section */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium text-gray-900">Federation Capabilities</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Configure which federation features this instance supports. These settings determine what
|
||||
connected instances can do with your instance.
|
||||
</p>
|
||||
|
||||
{/* Query Support */}
|
||||
<div className="flex items-start space-x-3 p-3 border border-gray-200 rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="supports-query"
|
||||
checked={capabilities.supportsQuery}
|
||||
onChange={() => {
|
||||
handleCapabilityToggle("supportsQuery");
|
||||
}}
|
||||
disabled={isLoading}
|
||||
className="mt-1"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<label htmlFor="supports-query" className="font-medium text-gray-900 cursor-pointer">
|
||||
Query Support
|
||||
</label>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Allows connected instances to query data from this instance (tasks, events, projects)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Command Support */}
|
||||
<div className="flex items-start space-x-3 p-3 border border-gray-200 rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="supports-command"
|
||||
checked={capabilities.supportsCommand}
|
||||
onChange={() => {
|
||||
handleCapabilityToggle("supportsCommand");
|
||||
}}
|
||||
disabled={isLoading}
|
||||
className="mt-1"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<label htmlFor="supports-command" className="font-medium text-gray-900 cursor-pointer">
|
||||
Command Support
|
||||
</label>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Allows connected instances to send commands to this instance
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Event Support */}
|
||||
<div className="flex items-start space-x-3 p-3 border border-gray-200 rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="supports-event"
|
||||
checked={capabilities.supportsEvent}
|
||||
onChange={() => {
|
||||
handleCapabilityToggle("supportsEvent");
|
||||
}}
|
||||
disabled={isLoading}
|
||||
className="mt-1"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<label htmlFor="supports-event" className="font-medium text-gray-900 cursor-pointer">
|
||||
Event Support
|
||||
</label>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Allows connected instances to subscribe to events from this instance
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Agent Spawn Support */}
|
||||
<div className="flex items-start space-x-3 p-3 border border-gray-200 rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="supports-agent-spawn"
|
||||
checked={capabilities.supportsAgentSpawn}
|
||||
onChange={() => {
|
||||
handleCapabilityToggle("supportsAgentSpawn");
|
||||
}}
|
||||
disabled={isLoading}
|
||||
className="mt-1"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<label
|
||||
htmlFor="supports-agent-spawn"
|
||||
className="font-medium text-gray-900 cursor-pointer"
|
||||
>
|
||||
Agent Spawn Support
|
||||
</label>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Allows connected instances to spawn and manage agents on this instance
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Protocol Version (Read-only) */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Protocol Version</label>
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-gray-600">
|
||||
{capabilities.protocolVersion}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center space-x-3 pt-4 border-t border-gray-200">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isLoading ? "Saving..." : "Save Configuration"}
|
||||
</button>
|
||||
{onCancel && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={isLoading}
|
||||
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
* Handles federation connection management API requests
|
||||
*/
|
||||
|
||||
import { apiGet, apiPost } from "./client";
|
||||
import { apiGet, apiPost, apiPatch } from "./client";
|
||||
|
||||
/**
|
||||
* Federation connection status
|
||||
@@ -169,6 +169,33 @@ export async function fetchInstanceIdentity(): Promise<PublicInstanceIdentity> {
|
||||
return apiGet<PublicInstanceIdentity>("/api/v1/federation/instance");
|
||||
}
|
||||
|
||||
/**
|
||||
* Update instance configuration request
|
||||
*/
|
||||
export interface UpdateInstanceRequest {
|
||||
name?: string;
|
||||
capabilities?: FederationCapabilities;
|
||||
metadata?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update this instance's configuration
|
||||
* Admin-only operation
|
||||
*/
|
||||
export async function updateInstanceConfiguration(
|
||||
updates: UpdateInstanceRequest
|
||||
): Promise<PublicInstanceIdentity> {
|
||||
return apiPatch<PublicInstanceIdentity>("/api/v1/federation/instance", updates);
|
||||
}
|
||||
|
||||
/**
|
||||
* Regenerate instance keypair
|
||||
* Admin-only operation
|
||||
*/
|
||||
export async function regenerateInstanceKeys(): Promise<PublicInstanceIdentity> {
|
||||
return apiPost<PublicInstanceIdentity>("/api/v1/federation/instance/regenerate-keys", {});
|
||||
}
|
||||
|
||||
/**
|
||||
* Mock connections for development
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user