@djangocfg/ui-nextjs 1.4.45

package/src/tools/OpenapiViewer/types.ts

@@ -0,0 +1,152 @@
+// API Key type for playground
+export interface ApiKey {
+  id: string;
+  name: string;
+  created_at?: string;
+  last_used_at?: string | null;
+}
+
+// OpenAPI Schema types
+export interface ApiEndpoint {
+  name: string;
+  method: string;
+  path: string;
+  description: string;
+  category: string;
+  parameters?: Array<{
+    name: string;
+    type: string;
+    required: boolean;
+    description?: string;
+  }>;
+  requestBody?: {
+    type: string;
+    description?: string;
+  };
+  responses?: Array<{
+    code: string;
+    description: string;
+  }>;
+}
+
+export interface OpenApiSchema {
+  openapi: string;
+  info: {
+    title: string;
+    version: string;
+    description?: string;
+  };
+  servers?: Array<{
+    url: string;
+    description?: string;
+  }>;
+  paths: Record<string, Record<string, any>>;
+  components?: {
+    schemas?: Record<string, any>;
+  };
+}
+
+// Schema source configuration (URL-based only)
+export interface SchemaSource {
+  id: string;
+  name: string;
+  url: string; // URL to fetch OpenAPI schema from (full URL)
+}
+
+// Playground configuration
+export interface PlaygroundConfig {
+  schemas: SchemaSource[]; // Array of schema URLs (full URLs from API)
+  defaultSchemaId?: string; // Default schema to select
+}
+
+// Playground state types
+export interface PlaygroundState {
+  // Step management
+  currentStep: PlaygroundStep;
+  steps: PlaygroundStep[];
+  
+  // Endpoint selection
+  selectedEndpoint: ApiEndpoint | null;
+  selectedCategory: string;
+  searchTerm: string;
+  selectedVersion: string; // API version selection
+  
+  // Request configuration
+  requestUrl: string;
+  requestMethod: string;
+  requestHeaders: string;
+  requestBody: string;
+  selectedApiKey: string | null;
+  manualApiToken: string; // Manual Bearer token input
+  parameters: Record<string, string>; // Form parameters for URL substitution
+  
+  // Response
+  response: ApiResponse | null;
+  loading: boolean;
+  
+  // UI state
+  sidebarOpen: boolean;
+}
+
+export type PlaygroundStep = 'endpoints' | 'request' | 'response';
+
+export interface ApiResponse {
+  status?: number;
+  statusText?: string;
+  headers?: any;
+  data?: any;
+  error?: string;
+}
+
+// Context types
+export interface PlaygroundContextType {
+  // State
+  state: PlaygroundState;
+  config: PlaygroundConfig;
+  apiKeys: ApiKey[];
+  apiKeysLoading: boolean;
+  
+  // Step management
+  setCurrentStep: (step: PlaygroundStep) => void;
+  goToNextStep: () => void;
+  goToPreviousStep: () => void;
+  
+  // Endpoint management
+  setSelectedEndpoint: (endpoint: ApiEndpoint | null) => void;
+  setSelectedCategory: (category: string) => void;
+  setSearchTerm: (term: string) => void;
+  setSelectedVersion: (version: string) => void;
+  
+  // Request management
+  setRequestUrl: (url: string) => void;
+  setRequestMethod: (method: string) => void;
+  setRequestHeaders: (headers: string) => void;
+  setRequestBody: (body: string) => void;
+  setSelectedApiKey: (apiKeyId: string | null) => void;
+  setManualApiToken: (token: string) => void;
+  setParameters: (parameters: Record<string, string>) => void;
+  
+  // Response management
+  setResponse: (response: ApiResponse | null) => void;
+  setLoading: (loading: boolean) => void;
+  
+  // UI management
+  setSidebarOpen: (open: boolean) => void;
+  
+  // Actions
+  clearAll: () => void;
+  copyToClipboard: (text: string) => void;
+  sendRequest: () => Promise<void>;
+}
+
+// Hook return types
+export interface UseOpenApiSchemaReturn {
+  loading: boolean;
+  error: string | null;
+  endpoints: ApiEndpoint[];
+  categories: string[];
+  schemas: SchemaSource[];
+  currentSchema: SchemaSource | null;
+  setCurrentSchema: (schemaId: string) => void;
+  refresh: () => void;
+} 

package/src/tools/OpenapiViewer/utils/apiKeyManager.ts

@@ -0,0 +1,149 @@
+/**
+ * API Key Management Utility
+ *
+ * Provides centralized functions for managing API keys in headers and requests.
+ * This utility can be used across different components that need to handle API keys.
+ */
+
+import type { ApiKey } from '../types';
+
+export type { ApiKey };
+
+export interface HeadersWithApiKey {
+  [key: string]: string;
+}
+
+/**
+ * Add API key to request headers
+ * @param headers - Existing headers object
+ * @param apiKey - API key object or string
+ * @returns Headers with API key added
+ */
+export function addApiKeyToHeaders(headers: HeadersWithApiKey, apiKey: ApiKey | string | null): HeadersWithApiKey {
+  if (!apiKey) {
+    return headers;
+  }
+
+  const keyValue = typeof apiKey === 'string' ? apiKey : (apiKey.id || '');
+
+  return {
+    ...headers,
+    'X-API-Key': keyValue,
+  };
+}
+
+/**
+ * Remove API key from headers object
+ * @param headers - Headers object
+ * @returns Headers without API key
+ */
+export function removeApiKeyFromHeaders(headers: HeadersWithApiKey): HeadersWithApiKey {
+  const { 'X-API-Key': removed, ...remainingHeaders } = headers;
+  return remainingHeaders;
+}
+
+/**
+ * Remove API key from headers JSON string
+ * @param headersJson - JSON string of headers
+ * @returns JSON string without API key
+ */
+export function removeApiKeyFromHeadersJson(headersJson: string): string {
+  try {
+    const headers = JSON.parse(headersJson);
+    const updatedHeaders = removeApiKeyFromHeaders(headers);
+    return JSON.stringify(updatedHeaders, null, 2);
+  } catch (error) {
+    console.error('Error parsing headers JSON:', error);
+    return headersJson;
+  }
+}
+
+/**
+ * Update headers JSON string with API key
+ * @param headersJson - JSON string of headers
+ * @param apiKey - API key object or string
+ * @returns Updated JSON string
+ */
+export function updateHeadersJsonWithApiKey(headersJson: string, apiKey: ApiKey | string | null): string {
+  try {
+    const headers = JSON.parse(headersJson);
+    const updatedHeaders = addApiKeyToHeaders(headers, apiKey);
+    return JSON.stringify(updatedHeaders, null, 2);
+  } catch (error) {
+    console.error('Error parsing headers JSON:', error);
+    return headersJson;
+  }
+}
+
+/**
+ * Find API key by ID in a list of API keys
+ * @param apiKeys - Array of API keys
+ * @param keyId - ID of the API key to find
+ * @returns API key object or null
+ */
+export function findApiKeyById(apiKeys: ApiKey[], keyId: string): ApiKey | null {
+  return apiKeys.find((key) => key.id === keyId) || null;
+}
+
+/**
+ * Validate API key format
+ * @param apiKey - API key string to validate
+ * @returns Whether the API key format is valid
+ */
+export function validateApiKeyFormat(apiKey: string): boolean {
+  // Basic validation - adjust based on your API key format requirements
+  return typeof apiKey === 'string' && apiKey.length > 0 && apiKey.trim() !== '';
+}
+
+/**
+ * Create default headers with API key
+ * @param apiKey - API key object or string
+ * @returns Default headers with API key
+ */
+export function createDefaultHeaders(apiKey?: ApiKey | string): HeadersWithApiKey {
+  const defaultHeaders: HeadersWithApiKey = {
+    'Content-Type': 'application/json',
+  };
+
+  if (apiKey) {
+    return addApiKeyToHeaders(defaultHeaders, apiKey);
+  }
+
+  return defaultHeaders;
+}
+
+/**
+ * Merge headers with API key
+ * @param baseHeaders - Base headers object
+ * @param additionalHeaders - Additional headers to merge
+ * @param apiKey - API key to add
+ * @returns Merged headers with API key
+ */
+export function mergeHeadersWithApiKey(baseHeaders: HeadersWithApiKey, additionalHeaders: HeadersWithApiKey, apiKey?: ApiKey | string): HeadersWithApiKey {
+  const mergedHeaders = { ...baseHeaders, ...additionalHeaders };
+
+  if (apiKey) {
+    return addApiKeyToHeaders(mergedHeaders, apiKey);
+  }
+
+  return mergedHeaders;
+}
+
+/**
+ * Log API key usage (for debugging/analytics)
+ * @param apiKey - API key that was used
+ * @param endpoint - Endpoint that was called
+ * @param success - Whether the request was successful
+ */
+export function logApiKeyUsage(apiKey: ApiKey | string, endpoint: string, success: boolean): void {
+  const keyValue = typeof apiKey === 'string' ? apiKey : (apiKey.id || '');
+  const keyName = typeof apiKey === 'string' ? 'Unknown' : apiKey.name;
+
+  console.log(`API Key Usage:`, {
+    keyName,
+    keyValue: keyValue.substring(0, 8) + '...',
+    endpoint,
+    success,
+    timestamp: new Date().toISOString(),
+  });
+}

package/src/tools/OpenapiViewer/utils/formatters.ts

@@ -0,0 +1,71 @@
+import type { ApiKey } from '../types';
+import { HTTP_METHOD_COLORS, HTTP_STATUS_COLORS } from '../constants';
+
+export const getMethodColor = (
+  method: string
+): 'success' | 'primary' | 'warning' | 'error' | 'default' => {
+  return HTTP_METHOD_COLORS[method.toUpperCase() as keyof typeof HTTP_METHOD_COLORS] || 'default';
+};
+
+export const getStatusColor = (
+  status: number
+): 'success' | 'warning' | 'error' | 'default' => {
+  const firstDigit = Math.floor(status / 100).toString();
+  return HTTP_STATUS_COLORS[firstDigit as keyof typeof HTTP_STATUS_COLORS] || 'default';
+};
+
+export const formatApiKeyDisplay = (apiKey: ApiKey): string => {
+  const preview = apiKey.id.substring(0, 8);
+  return `${apiKey.name} (${preview}...)`;
+};
+
+export const isValidJson = (str: string): boolean => {
+  if (!str || typeof str !== 'string') return false;
+  try {
+    JSON.parse(str);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const formatRequestHeaders = (headers: Record<string, string>): string => {
+  return JSON.stringify(headers, null, 2);
+};
+
+export const parseRequestHeaders = (headersString: string): Record<string, string> => {
+  if (!headersString || typeof headersString !== 'string') {
+    return { 'Content-Type': 'application/json' };
+  }
+
+  try {
+    const parsed = JSON.parse(headersString);
+    return typeof parsed === 'object' && parsed !== null ? parsed : { 'Content-Type': 'application/json' };
+  } catch {
+    return { 'Content-Type': 'application/json' };
+  }
+};
+
+// Substitute URL parameters like {id}, {userId}, etc.
+export const substituteUrlParameters = (
+  url: string,
+  parameters: Record<string, string>
+): string => {
+  let substitutedUrl = url;
+
+  Object.entries(parameters).forEach(([key, value]) => {
+    if (value && value.trim() !== '') {
+      // Replace both {key} and %7Bkey%7D patterns (URL encoded version)
+      const patterns = [
+        new RegExp(`\\{${key}\\}`, 'g'),
+        new RegExp(`%7B${key}%7D`, 'gi'),
+      ];
+
+      patterns.forEach((pattern) => {
+        substitutedUrl = substitutedUrl.replace(pattern, encodeURIComponent(value));
+      });
+    }
+  });
+
+  return substitutedUrl;
+};

package/src/tools/OpenapiViewer/utils/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Playground Utilities
+ *
+ * Centralized exports for all playground utilities
+ */
+
+export * from './apiKeyManager';
+export * from './versionManager';
+export * from './formatters'; 

package/src/tools/OpenapiViewer/utils/versionManager.ts

@@ -0,0 +1,161 @@
+/**
+ * API Version Management Utilities
+ * Handles version detection, filtering, and URL transformation
+ */
+
+import type { ApiEndpoint } from '../types';
+
+export interface ApiVersion {
+  id: string;
+  name: string;
+  description: string;
+  isDefault: boolean;
+}
+
+// Available API versions
+export const API_VERSIONS: ApiVersion[] = [
+  {
+    id: 'v1',
+    name: 'v1',
+    description: 'Current stable version',
+    isDefault: true,
+  },
+];
+
+/**
+ * Detect version from endpoint path
+ */
+export const detectEndpointVersion = (path: string): string => {
+  // Check for versioned paths like /api/vehicles_api/v1/...
+  const versionMatch = path.match(/\/api\/[^/]+\/(v\d+)\//);
+  if (versionMatch && versionMatch[1]) {
+    return versionMatch[1];
+  }
+  
+  // If no version found, default to v1
+  return 'v1';
+};
+
+/**
+ * Check if endpoint belongs to specific version
+ */
+export const isEndpointInVersion = (endpoint: ApiEndpoint, version: string): boolean => {
+  const endpointVersion = detectEndpointVersion(endpoint.path);
+  return endpointVersion === version;
+};
+
+/**
+ * Filter endpoints by version
+ */
+export const filterEndpointsByVersion = (endpoints: ApiEndpoint[], version: string): ApiEndpoint[] => {
+  return endpoints.filter(endpoint => isEndpointInVersion(endpoint, version));
+};
+
+/**
+ * Remove duplicate endpoints across versions
+ * Keeps only the specified version, removes duplicates from other versions
+ */
+export const deduplicateEndpoints = (endpoints: ApiEndpoint[], preferredVersion: string): ApiEndpoint[] => {
+  const endpointMap = new Map<string, ApiEndpoint>();
+  
+  // Group endpoints by normalized path (without version)
+  const groupedEndpoints = new Map<string, ApiEndpoint[]>();
+  
+  endpoints.forEach(endpoint => {
+    const normalizedPath = normalizeEndpointPath(endpoint.path);
+    if (!groupedEndpoints.has(normalizedPath)) {
+      groupedEndpoints.set(normalizedPath, []);
+    }
+    groupedEndpoints.get(normalizedPath)!.push(endpoint);
+  });
+  
+  // For each group, pick the endpoint from preferred version
+  groupedEndpoints.forEach((endpointGroup, normalizedPath) => {
+    let selectedEndpoint: ApiEndpoint | null = null;
+    
+    // Try to find endpoint in preferred version
+    const versionEndpoint = endpointGroup.find(ep => isEndpointInVersion(ep, preferredVersion));
+    if (versionEndpoint) {
+      selectedEndpoint = versionEndpoint;
+    } else if (endpointGroup.length > 0) {
+      // Fallback to first available endpoint
+      selectedEndpoint = endpointGroup[0] || null;
+    }
+    
+    if (selectedEndpoint) {
+      endpointMap.set(normalizedPath, selectedEndpoint);
+    }
+  });
+  
+  return Array.from(endpointMap.values());
+};
+
+/**
+ * Normalize endpoint path by removing version prefix
+ * /api/vehicles_api/v1/vehicles/ -> /api/vehicles_api/vehicles/
+ * /api/vehicles_api/vehicles/ -> /api/vehicles_api/vehicles/
+ */
+export const normalizeEndpointPath = (path: string): string => {
+  // Remove version prefix like /v1/, /v2/, etc.
+  return path.replace(/\/v\d+\//, '/');
+};
+
+/**
+ * Convert endpoint path to specific version
+ */
+export const convertEndpointToVersion = (endpoint: ApiEndpoint, targetVersion: string): ApiEndpoint => {
+  const currentVersion = detectEndpointVersion(endpoint.path);
+  
+  // If already in target version, return as is
+  if (currentVersion === targetVersion) {
+    return endpoint;
+  }
+  
+  let newPath = endpoint.path;
+  
+  // Replace version: /api/vehicles_api/v1/vehicles/ -> /api/vehicles_api/v2/vehicles/
+  newPath = newPath.replace(/\/v\d+\//, `/${targetVersion}/`);
+  
+  return {
+    ...endpoint,
+    path: newPath,
+  };
+};
+
+/**
+ * Get version info by ID
+ */
+export const getVersionById = (versionId: string): ApiVersion | undefined => {
+  return API_VERSIONS.find(v => v.id === versionId);
+};
+
+/**
+ * Get default version
+ */
+export const getDefaultVersion = (): ApiVersion => {
+  const defaultVersion = API_VERSIONS.find(v => v.isDefault);
+  if (defaultVersion) {
+    return defaultVersion;
+  }
+  
+  // Fallback to first version if no default is set
+  if (API_VERSIONS.length > 0 && API_VERSIONS[0]) {
+    return API_VERSIONS[0];
+  }
+  
+  // This should never happen, but TypeScript requires it
+  throw new Error('No API versions defined');
+};
+
+/**
+ * Get version statistics from endpoints
+ */
+export const getVersionStats = (endpoints: ApiEndpoint[]): Record<string, number> => {
+  const stats: Record<string, number> = {};
+  
+  API_VERSIONS.forEach(version => {
+    stats[version.id] = filterEndpointsByVersion(endpoints, version.id).length;
+  });
+  
+  return stats;
+};