@inkeep/agents-manage-ui 0.1.0

package/src/components/credentials/views/auth-form-config.ts

@@ -0,0 +1,202 @@
+import type { AuthModeType } from '@nangohq/types';
+
+/**
+ * Field configuration for credential forms
+ */
+export interface FieldConfig {
+  /** Field key from the ApiPublicIntegrationCredentials type */
+  key: string;
+  /** Human-readable label */
+  label: string;
+  /** Input type */
+  type: 'text' | 'password' | 'url' | 'textarea';
+  /** Which generic component to use */
+  component: 'input' | 'textarea';
+  /** Placeholder text */
+  placeholder: string;
+  /** Help text to show below the field */
+  helpText?: string;
+  /** Whether this field is required */
+  required: boolean;
+  /** Custom validation function */
+  validate?: (value: string) => string | undefined;
+}
+
+/**
+ * Section configuration for grouping related fields
+ */
+export interface FormSection {
+  /** Section title */
+  title: string;
+  /** Section description */
+  description?: string;
+  /** Fields in this section */
+  fields: readonly FieldConfig[];
+}
+
+/**
+ * Complete form configuration for an auth mode
+ */
+export interface FormConfig {
+  /** Auth mode this config applies to */
+  authMode: AuthModeType;
+  /** Form sections */
+  sections: FormSection[];
+}
+
+/**
+ * URL validation helper with protocol whitelist for security
+ */
+const validateUrl = (value: string): string | undefined => {
+  if (!value.trim()) return undefined;
+  try {
+    const url = new URL(value.trim());
+    // Only allow safe protocols to prevent XSS attacks
+    if (!['http:', 'https:'].includes(url.protocol)) {
+      return 'Only HTTP and HTTPS URLs are allowed';
+    }
+    return undefined;
+  } catch {
+    return 'Please enter a valid URL';
+  }
+};
+
+/**
+ * Reusable field definitions
+ */
+const FIELD_DEFINITIONS = {
+  client_id: {
+    key: 'client_id',
+    label: 'Client ID',
+    type: 'text' as const,
+    component: 'input' as const,
+    placeholder: 'Enter your OAuth client ID',
+    required: true,
+  },
+  client_secret: {
+    key: 'client_secret',
+    label: 'Client Secret',
+    type: 'password' as const,
+    component: 'input' as const,
+    placeholder: 'Enter your OAuth client secret',
+    required: true,
+  },
+  scopes: {
+    key: 'scopes',
+    label: 'Scopes',
+    type: 'textarea' as const,
+    component: 'textarea' as const,
+    placeholder: 'Enter required scopes (space or comma separated)',
+    helpText: 'Leave empty to use default scopes for this provider',
+    required: false,
+  },
+  app_id: {
+    key: 'app_id',
+    label: 'App ID',
+    type: 'text' as const,
+    component: 'input' as const,
+    placeholder: 'Enter your app ID',
+    required: true,
+  },
+  app_link: {
+    key: 'app_link',
+    label: 'App Link',
+    type: 'url' as const,
+    component: 'input' as const,
+    placeholder: 'https://example.com/app',
+    helpText: 'The URL where your app is hosted or registered',
+    required: true,
+    validate: validateUrl,
+  },
+  private_key: {
+    key: 'private_key',
+    label: 'Private Key',
+    type: 'textarea' as const,
+    component: 'textarea' as const,
+    placeholder: '-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----',
+    helpText: "Your app's private key for authentication",
+    required: true,
+  },
+} as const;
+
+/**
+ * Reusable section definitions
+ */
+const SECTION_DEFINITIONS = {
+  oauth: {
+    title: 'OAuth Credentials',
+    description:
+      "You'll need to create an OAuth application in the provider's developer console to get these credentials.",
+    fields: [
+      FIELD_DEFINITIONS.client_id,
+      FIELD_DEFINITIONS.client_secret,
+      FIELD_DEFINITIONS.scopes,
+    ],
+  },
+  app: {
+    title: 'App Credentials',
+    description:
+      "You'll need to create an app in the provider's developer portal to get these credentials.",
+    fields: [FIELD_DEFINITIONS.app_id, FIELD_DEFINITIONS.app_link, FIELD_DEFINITIONS.private_key],
+  },
+  oauthMinimal: {
+    title: 'OAuth Credentials',
+    fields: [FIELD_DEFINITIONS.client_id, FIELD_DEFINITIONS.client_secret],
+  },
+  appMinimal: {
+    title: 'App Credentials',
+    fields: [FIELD_DEFINITIONS.app_id, FIELD_DEFINITIONS.app_link, FIELD_DEFINITIONS.private_key],
+  },
+} as const;
+
+/**
+ * Form configurations mapped by auth mode
+ * These are derived from the ApiPublicIntegrationCredentials union type
+ */
+export const FORM_CONFIGS: Record<string, FormConfig> = {
+  OAUTH1: {
+    authMode: 'OAUTH1',
+    sections: [SECTION_DEFINITIONS.oauth],
+  },
+  OAUTH2: {
+    authMode: 'OAUTH2',
+    sections: [SECTION_DEFINITIONS.oauth],
+  },
+  TBA: {
+    authMode: 'TBA',
+    sections: [
+      {
+        title: 'Authentication Credentials',
+        description:
+          "You'll need to create an application in the provider's developer console to get these credentials.",
+        fields: [
+          FIELD_DEFINITIONS.client_id,
+          FIELD_DEFINITIONS.client_secret,
+          FIELD_DEFINITIONS.scopes,
+        ],
+      },
+    ],
+  },
+  APP: {
+    authMode: 'APP',
+    sections: [SECTION_DEFINITIONS.app],
+  },
+  CUSTOM: {
+    authMode: 'CUSTOM',
+    sections: [SECTION_DEFINITIONS.oauthMinimal, SECTION_DEFINITIONS.appMinimal],
+  },
+};
+
+/**
+ * Get form configuration for a given auth mode
+ */
+export function getFormConfig(authMode: AuthModeType): FormConfig | null {
+  return FORM_CONFIGS[authMode] || null;
+}
+
+/**
+ * Check if an auth mode requires a credential form
+ */
+export function requiresCredentialForm(authMode: AuthModeType): boolean {
+  return authMode in FORM_CONFIGS;
+}

package/src/components/credentials/views/credential-form-validation.ts

@@ -0,0 +1,14 @@
+import { z } from 'zod';
+
+export const credentialFormSchema = z.object({
+  name: z
+    .string()
+    .min(1, 'Name is required')
+    .refine((val) => val.length > 0, 'Name cannot be empty after transformation')
+    .refine((val) => val.length <= 50, 'Name must be 50 characters or less'),
+  apiKeyToSet: z.string().min(1, 'Enter an API key'),
+  metadata: z.record(z.string(), z.string()).default({}),
+  selectedTool: z.string().optional(),
+});
+
+export type CredentialFormData = z.output<typeof credentialFormSchema>;

package/src/components/credentials/views/credential-form.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { GenericInput } from '@/components/form/generic-input';
+import { GenericKeyValueInput } from '@/components/form/generic-key-value-input';
+import { GenericSelect } from '@/components/form/generic-select';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Form } from '@/components/ui/form';
+import { fetchMCPTools, type MCPTool } from '@/lib/api/tools';
+import { type CredentialFormData, credentialFormSchema } from './credential-form-validation';
+
+interface CredentialFormProps {
+  /** Handler for creating new credentials */
+  onCreateCredential: (data: CredentialFormData) => Promise<void>;
+  /** Tenant ID */
+  tenantId: string;
+  /** Project ID */
+  projectId: string;
+}
+
+const defaultValues: CredentialFormData = {
+  name: '',
+  apiKeyToSet: '',
+  metadata: {},
+  selectedTool: undefined,
+};
+
+export function CredentialForm({ onCreateCredential, tenantId, projectId }: CredentialFormProps) {
+  const [availableTools, setAvailableTools] = useState<MCPTool[]>([]);
+  const [toolsLoading, setToolsLoading] = useState(true);
+  const [shouldLinkToServer, setShouldLinkToServer] = useState(false);
+
+  const form = useForm({
+    resolver: zodResolver(credentialFormSchema),
+    defaultValues: defaultValues,
+  });
+
+  const { isSubmitting } = form.formState;
+
+  useEffect(() => {
+    const loadAvailableTools = async () => {
+      try {
+        const allTools = await fetchMCPTools(tenantId, projectId);
+        const toolsWithoutCredentials = allTools.filter((tool) => !tool.credentialReferenceId);
+        setAvailableTools(toolsWithoutCredentials);
+      } catch (err) {
+        console.error('Failed to load MCP tools:', err);
+      } finally {
+        setToolsLoading(false);
+      }
+    };
+
+    loadAvailableTools();
+  }, [tenantId, projectId]);
+
+  // Handle checkbox state changes
+  useEffect(() => {
+    if (!shouldLinkToServer) {
+      // Clear the selectedTool field when not linking to server
+      form.setValue('selectedTool', undefined);
+    }
+  }, [shouldLinkToServer, form]);
+
+  const handleLinkToServerChange = (checked: boolean | 'indeterminate') => {
+    setShouldLinkToServer(checked === true);
+  };
+
+  const onSubmit = async (data: CredentialFormData) => {
+    try {
+      if (
+        shouldLinkToServer &&
+        (data.selectedTool === 'loading' || data.selectedTool === 'error')
+      ) {
+        toast('Please select a valid MCP server');
+        return;
+      }
+
+      await onCreateCredential(data);
+    } catch (err) {
+      console.error('Failed to create credential:', err);
+      toast(err instanceof Error ? err.message : 'Failed to create credential');
+    }
+  };
+
+  const serverOptions = useMemo(
+    () => [
+      ...(toolsLoading
+        ? [
+            {
+              value: 'loading',
+              label: 'Loading MCP servers...',
+              disabled: true,
+            },
+          ]
+        : []),
+      ...availableTools.map((tool) => ({
+        value: tool.id,
+        label: `${tool.name} - ${tool.config.mcp.server.url}`,
+      })),
+    ],
+    [availableTools, toolsLoading]
+  );
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        {/* Credential Details Section */}
+        <div className="space-y-8">
+          <GenericInput
+            control={form.control}
+            name="name"
+            label="Name"
+            placeholder="e.g., production-api-key"
+          />
+
+          <div className="space-y-3">
+            <GenericInput
+              control={form.control}
+              name="apiKeyToSet"
+              label="API Key"
+              placeholder="e.g., sk-1234567890abcdef1234567890abcdef"
+            />
+            <div className="text-xs text-muted-foreground p-3 bg-muted/30 rounded-md">
+              <p className="mb-2">
+                <strong>How this works:</strong> When your agent connects to the MCP server, this
+                API key will be automatically sent as an authentication header:
+              </p>
+              <p>
+                <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                  Authorization: Bearer your-api-key-here
+                </code>
+              </p>
+              <p className="mt-2 text-muted-foreground/80">
+                This ensures secure access to the server's tools and data.
+              </p>
+            </div>
+          </div>
+
+          {/* Metadata Section */}
+          <div className="space-y-3">
+            <GenericKeyValueInput
+              control={form.control}
+              name="metadata"
+              label="Metadata (Optional)"
+              keyPlaceholder="Header name (e.g., X-API-Key)"
+              valuePlaceholder="Header value"
+            />
+            <div className="text-xs text-muted-foreground p-3 bg-muted/30 rounded-md">
+              <p className="mb-2">Add extra headers to be included with authentication requests.</p>
+              <p>
+                Examples:{' '}
+                <code className="bg-background px-1.5 py-0.5 rounded border mx-1">User-Agent</code>
+                <code className="bg-background px-1.5 py-0.5 rounded border mx-1">X-API-Key</code>
+                <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                  Content-Type
+                </code>
+              </p>
+            </div>
+          </div>
+
+          {/* Tool Selection Section */}
+          {availableTools.length > 0 && (
+            <div className="space-y-4">
+              <div className="flex items-center space-x-3">
+                <Checkbox
+                  id="linkToServer"
+                  checked={shouldLinkToServer}
+                  onCheckedChange={handleLinkToServerChange}
+                />
+                <label
+                  htmlFor="linkToServer"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Link this credential to an MCP server
+                </label>
+              </div>
+
+              {shouldLinkToServer && (
+                <GenericSelect
+                  control={form.control}
+                  name="selectedTool"
+                  label=""
+                  options={serverOptions}
+                  placeholder="Choose an MCP server"
+                />
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-3 pt-4">
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? 'Creating...' : 'Create Credential'}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

package/src/components/credentials/views/edit-credential-form.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { CredentialToolsList } from '@/components/credentials/credential-tools-list';
+import { GenericInput } from '@/components/form/generic-input';
+import { GenericKeyValueInput } from '@/components/form/generic-key-value-input';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { type Credential, updateCredential } from '@/lib/api/credentials';
+import { setNangoConnectionMetadata } from '@/lib/mcp-tools/nango';
+
+// Edit-specific validation schema
+const editCredentialFormSchema = z.object({
+  name: z
+    .string()
+    .min(1, 'Name is required')
+    .refine((val) => val.length > 0, 'Name cannot be empty after transformation')
+    .refine((val) => val.length <= 50, 'Name must be 50 characters or less'),
+  metadata: z.record(z.string(), z.string()).default({}),
+});
+
+export type EditCredentialFormData = z.output<typeof editCredentialFormSchema>;
+
+interface EditCredentialFormProps {
+  tenantId: string;
+  projectId: string;
+  credential: Credential;
+  initialFormData: EditCredentialFormData;
+}
+
+function getCredentialType(credential: Credential) {
+  if (credential.retrievalParams?.provider === 'private-api-bearer') {
+    return 'Bearer Auth';
+  }
+
+  if (credential.retrievalParams && 'authMode' in credential.retrievalParams) {
+    return credential.retrievalParams.authMode as string;
+  }
+
+  return credential.type;
+}
+
+export function EditCredentialForm({
+  tenantId,
+  projectId,
+  credential,
+  initialFormData,
+}: EditCredentialFormProps) {
+  const router = useRouter();
+
+  const form = useForm({
+    resolver: zodResolver(editCredentialFormSchema),
+    defaultValues: initialFormData,
+  });
+
+  const { isSubmitting } = form.formState;
+
+  const handleUpdateCredential = async (formData: EditCredentialFormData) => {
+    try {
+      // Update credential metadata in our database
+      await updateCredential(tenantId, projectId, credential.id, {
+        retrievalParams: {
+          ...credential.retrievalParams,
+          ...formData.metadata,
+        },
+      });
+
+      // Update connection metadata in Nango if we have connection info
+      if (
+        credential.retrievalParams?.providerConfigKey &&
+        credential.retrievalParams?.connectionId &&
+        formData.metadata &&
+        Object.keys(formData.metadata).length > 0
+      ) {
+        await setNangoConnectionMetadata({
+          providerConfigKey: credential.retrievalParams.providerConfigKey as string,
+          connectionId: credential.retrievalParams.connectionId as string,
+          metadata: formData.metadata as Record<string, string>,
+        });
+      }
+
+      toast.success('Credential updated successfully');
+      router.push(`/${tenantId}/projects/${projectId}/credentials`);
+    } catch (err) {
+      console.error('Failed to update credential:', err);
+      toast(err instanceof Error ? err.message : 'Failed to update credential');
+    }
+  };
+
+  const onSubmit = async (data: EditCredentialFormData) => {
+    await handleUpdateCredential(data);
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        {/* Credential Details Section */}
+        <div className="space-y-8">
+          <GenericInput
+            control={form.control}
+            name="name"
+            label="Name"
+            placeholder="e.g., production-api-key"
+            disabled={true}
+          />
+
+          {/* Credential Type Display */}
+          <div className="space-y-3">
+            <Label>Credential Type</Label>
+            <Input type="text" disabled={true} value={getCredentialType(credential)} />
+            {getCredentialType(credential) === 'Bearer Auth' && (
+              <div className="text-xs text-muted-foreground p-3 bg-muted/30 rounded-md">
+                <p className="mb-2">
+                  <strong>How this works:</strong> When your agent connects to the MCP server, this
+                  API key will be automatically sent as an authentication header:
+                </p>
+                <p>
+                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                    Authorization: Bearer your-api-key-here
+                  </code>
+                </p>
+                <p className="mt-2 text-muted-foreground/80">
+                  This ensures secure access to the server's tools and data.
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* Metadata Section */}
+          {credential.type === 'nango' && (
+            <div className="space-y-3">
+              <GenericKeyValueInput
+                control={form.control}
+                name="metadata"
+                label="Metadata (Optional)"
+                keyPlaceholder="Header name (e.g., X-API-Key)"
+                valuePlaceholder="Header value"
+              />
+              <div className="text-xs text-muted-foreground p-3 bg-muted/30 rounded-md">
+                <p className="mb-2">
+                  Add extra headers to be included with authentication requests.
+                </p>
+                <p>
+                  Examples:{' '}
+                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                    User-Agent
+                  </code>
+                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">X-API-Key</code>
+                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                    Content-Type
+                  </code>
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* MCP Servers Using This Credential */}
+          <CredentialToolsList tools={credential.tools} tenantId={tenantId} projectId={projectId} />
+        </div>
+
+        <div className="flex gap-3 pt-4">
+          {credential.type === 'nango' && (
+            <Button type="submit" disabled={isSubmitting}>
+              Save
+            </Button>
+          )}
+        </div>
+      </form>
+    </Form>
+  );
+}