@eventcatalog/core 2.63.0 → 2.64.1

package/eventcatalog/src/components/SchemaExplorer/AvroSchemaViewer.tsx

@@ -0,0 +1,465 @@
+import { useState, useEffect, useRef } from 'react';
+
+interface AvroSchemaViewerProps {
+  schema: any;
+  title?: string;
+  maxHeight?: string;
+  expand?: boolean | string;
+  search?: boolean | string;
+  showRequired?: boolean | string;
+  onOpenFullscreen?: () => void;
+}
+
+interface AvroFieldProps {
+  field: any;
+  level: number;
+  expand: boolean;
+  showRequired?: boolean;
+}
+
+// Format Avro type for display
+function formatAvroType(type: any): string {
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  if (Array.isArray(type)) {
+    // Union type - show all options
+    return type.join(' | ');
+  }
+
+  if (typeof type === 'object') {
+    if (type.type === 'array') {
+      return `array<${formatAvroType(type.items)}>`;
+    }
+    if (type.type === 'map') {
+      return `map<${formatAvroType(type.values)}>`;
+    }
+    if (type.type === 'record') {
+      return `record: ${type.name || 'unnamed'}`;
+    }
+    if (type.type === 'enum') {
+      return `enum: ${type.name || 'unnamed'}`;
+    }
+    if (type.logicalType) {
+      return `${type.type} (${type.logicalType})`;
+    }
+    return type.type || 'unknown';
+  }
+
+  return 'unknown';
+}
+
+// Check if a type has nested fields
+function hasNestedFields(type: any): boolean {
+  if (typeof type === 'object' && !Array.isArray(type)) {
+    return type.type === 'record' && type.fields && type.fields.length > 0;
+  }
+  return false;
+}
+
+// Check if a field is required (not optional)
+// A field is optional if:
+// - It has a default value, OR
+// - Its type is null or includes null in a union
+function isFieldRequired(field: any): boolean {
+  // If field has a default value, it's optional
+  if ('default' in field) {
+    return false;
+  }
+
+  const fieldType = field.type;
+
+  // If type is null, field is optional
+  if (fieldType === 'null') {
+    return false;
+  }
+
+  // If type is a union (array), check if it includes null
+  if (Array.isArray(fieldType)) {
+    return !fieldType.includes('null');
+  }
+
+  // Otherwise, field is required
+  return true;
+}
+
+// AvroField component - displays a single field with nested support
+const AvroField = ({ field, level, expand, showRequired }: AvroFieldProps) => {
+  const [isExpanded, setIsExpanded] = useState(expand);
+  const hasNested = hasNestedFields(field.type);
+  const indentClass = `pl-${level * 4}`;
+  const isRequired = showRequired ? isFieldRequired(field) : undefined;
+
+  useEffect(() => {
+    setIsExpanded(expand);
+  }, [expand]);
+
+  return (
+    <div className={`avro-field-container mb-2 border-l border-gray-200 ${indentClass}`}>
+      <div className="flex items-start space-x-2">
+        {/* Collapse/Expand button */}
+        {hasNested ? (
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="avro-field-toggle text-gray-500 hover:text-gray-700 pt-0.5 w-4 text-center flex-shrink-0"
+            aria-expanded={isExpanded}
+          >
+            <span className="font-mono text-xs">{isExpanded ? '▼' : '▶'}</span>
+          </button>
+        ) : (
+          <div className="w-4" />
+        )}
+
+        {/* Field details */}
+        <div className="flex-grow">
+          <div className="flex justify-between items-baseline">
+            <div>
+              <span className="avro-field-name font-semibold text-gray-800 text-sm">{field.name}</span>
+              <span className="ml-1.5 text-purple-600 font-mono text-xs">{formatAvroType(field.type)}</span>
+            </div>
+            {showRequired && isRequired && <span className="text-red-600 text-xs ml-3 flex-shrink-0">required</span>}
+          </div>
+
+          {field.doc && <p className="text-gray-600 text-xs mt-1">{field.doc}</p>}
+
+          {/* Show enum values if present */}
+          {field.type?.type === 'enum' && field.type.symbols && (
+            <div className="text-xs text-gray-500 mt-1">
+              Values:{' '}
+              {field.type.symbols.map((s: string) => (
+                <code key={s} className="bg-gray-100 px-1 rounded mx-0.5">
+                  {s}
+                </code>
+              ))}
+            </div>
+          )}
+
+          {/* Nested fields for record types */}
+          {hasNested && (
+            <div className={`avro-nested-content mt-2 ${!isExpanded ? 'hidden' : ''}`}>
+              {field.type.fields.map((nestedField: any) => (
+                <AvroField
+                  key={nestedField.name}
+                  field={nestedField}
+                  level={level + 1}
+                  expand={expand}
+                  showRequired={showRequired}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Main AvroSchemaViewer component
+export default function AvroSchemaViewer({
+  schema,
+  title,
+  maxHeight,
+  expand = false,
+  search = true,
+  showRequired = false,
+  onOpenFullscreen,
+}: AvroSchemaViewerProps) {
+  const expandBool = expand === true || expand === 'true';
+  const searchBool = search !== false && search !== 'false';
+  const showRequiredBool = showRequired === true || showRequired === 'true';
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [expandAll, setExpandAll] = useState(expandBool);
+  const [currentMatches, setCurrentMatches] = useState<HTMLElement[]>([]);
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(-1);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const fieldsContainerRef = useRef<HTMLDivElement>(null);
+
+  const totalFields = schema?.fields?.length || 0;
+
+  // Search functionality with highlighting
+  useEffect(() => {
+    if (!fieldsContainerRef.current) return;
+
+    const fieldContainers = fieldsContainerRef.current.querySelectorAll('.avro-field-container');
+    const matches: HTMLElement[] = [];
+
+    if (searchQuery === '') {
+      // Reset search
+      fieldContainers.forEach((container) => {
+        container.classList.remove('search-match', 'search-no-match', 'search-current-match', 'search-dimmed');
+        const nameEl = container.querySelector('.avro-field-name');
+        if (nameEl) {
+          nameEl.innerHTML = nameEl.textContent || '';
+        }
+      });
+      setCurrentMatches([]);
+      setCurrentMatchIndex(-1);
+      return;
+    }
+
+    const query = searchQuery.toLowerCase().trim();
+
+    fieldContainers.forEach((container) => {
+      const nameEl = container.querySelector('.avro-field-name');
+      if (!nameEl) return;
+
+      const fieldName = (nameEl.textContent || '').toLowerCase();
+
+      if (fieldName.includes(query)) {
+        container.classList.add('search-match');
+        container.classList.remove('search-dimmed');
+        matches.push(container as HTMLElement);
+
+        // Highlight the search term
+        const regex = new RegExp(`(${query})`, 'gi');
+        nameEl.innerHTML = (nameEl.textContent || '').replace(regex, '<mark class="bg-yellow-200 rounded px-0.5">$1</mark>');
+
+        // Expand parent containers
+        let parent = container.parentElement;
+        while (parent && parent !== fieldsContainerRef.current) {
+          if (parent.classList.contains('avro-nested-content') && parent.classList.contains('hidden')) {
+            const parentFieldContainer = parent.closest('.avro-field-container');
+            if (parentFieldContainer) {
+              const toggleBtn = parentFieldContainer.querySelector('.avro-field-toggle');
+              if (toggleBtn && toggleBtn.getAttribute('aria-expanded') === 'false') {
+                (toggleBtn as HTMLButtonElement).click();
+              }
+            }
+          }
+          // Remove dimming from parent containers
+          if (parent.classList.contains('avro-field-container')) {
+            parent.classList.remove('search-dimmed');
+          }
+          parent = parent.parentElement;
+        }
+      } else {
+        container.classList.remove('search-match', 'search-current-match');
+        container.classList.add('search-dimmed');
+        nameEl.innerHTML = nameEl.textContent || '';
+      }
+    });
+
+    setCurrentMatches(matches);
+    if (matches.length > 0) {
+      setCurrentMatchIndex(0);
+      matches[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+    } else {
+      setCurrentMatchIndex(-1);
+    }
+  }, [searchQuery]);
+
+  // Update match highlighting
+  useEffect(() => {
+    currentMatches.forEach((match, index) => {
+      if (index === currentMatchIndex) {
+        match.classList.add('search-current-match');
+      } else {
+        match.classList.remove('search-current-match');
+      }
+    });
+
+    if (currentMatchIndex >= 0 && currentMatches[currentMatchIndex]) {
+      currentMatches[currentMatchIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [currentMatchIndex, currentMatches]);
+
+  const handleExpandAll = () => {
+    setExpandAll(true);
+  };
+
+  const handleCollapseAll = () => {
+    setExpandAll(false);
+  };
+
+  const handlePrevMatch = () => {
+    if (currentMatchIndex > 0) {
+      setCurrentMatchIndex(currentMatchIndex - 1);
+    }
+  };
+
+  const handleNextMatch = () => {
+    if (currentMatchIndex < currentMatches.length - 1) {
+      setCurrentMatchIndex(currentMatchIndex + 1);
+    }
+  };
+
+  if (!schema || schema.type !== 'record') {
+    return (
+      <div className="flex items-center justify-center p-8 text-gray-500">
+        <p className="text-sm">Invalid Avro schema format</p>
+      </div>
+    );
+  }
+
+  const containerStyle = maxHeight
+    ? { maxHeight: maxHeight.includes('px') ? maxHeight : `${maxHeight}px`, minHeight: '15em' }
+    : {};
+
+  const heightClass = maxHeight ? '' : 'h-full';
+  const overflowClass = maxHeight ? 'overflow-hidden' : '';
+
+  return (
+    <div
+      className={`${heightClass} ${overflowClass} flex flex-col bg-white border border-gray-100 rounded-md shadow-sm`}
+      style={containerStyle}
+    >
+      {/* Toolbar */}
+      {searchBool && (
+        <div className="flex-shrink-0 bg-white pt-4 px-4 pb-3 border-b border-gray-100 shadow-sm">
+          <div className="flex flex-col sm:flex-row gap-3">
+            <div className="flex-1 relative">
+              <input
+                ref={searchInputRef}
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search fields..."
+                className="w-full px-3 py-1.5 pr-20 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (e.shiftKey) {
+                      handlePrevMatch();
+                    } else {
+                      handleNextMatch();
+                    }
+                  }
+                }}
+              />
+              <div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
+                <button
+                  onClick={handlePrevMatch}
+                  disabled={currentMatches.length === 0 || currentMatchIndex <= 0}
+                  className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
+                  title="Previous match"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+                <button
+                  onClick={handleNextMatch}
+                  disabled={currentMatches.length === 0 || currentMatchIndex >= currentMatches.length - 1}
+                  className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
+                  title="Next match"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {onOpenFullscreen && (
+                <button
+                  onClick={onOpenFullscreen}
+                  className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                  title="Open in fullscreen"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-3.5 w-3.5 inline-block"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+                    />
+                  </svg>
+                </button>
+              )}
+              <button
+                onClick={handleExpandAll}
+                className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+              >
+                Expand All
+              </button>
+              <button
+                onClick={handleCollapseAll}
+                className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
+              >
+                Collapse All
+              </button>
+              <div className="text-xs text-gray-500">
+                {totalFields} {totalFields === 1 ? 'field' : 'fields'}
+              </div>
+            </div>
+          </div>
+          {searchQuery && (
+            <div className="mt-2 text-xs text-gray-600">
+              {currentMatches.length > 0
+                ? `${currentMatchIndex + 1} of ${currentMatches.length} ${currentMatches.length === 1 ? 'match' : 'matches'}`
+                : 'No fields found'}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Schema info */}
+      <div className="px-4 pt-4">
+        <div className="flex items-baseline gap-2 mb-2">
+          <span className="text-sm font-medium text-gray-600">Record:</span>
+          <span className="font-mono text-sm text-blue-600">{schema.name}</span>
+          {schema.namespace && <span className="font-mono text-xs text-gray-500">({schema.namespace})</span>}
+        </div>
+        {schema.doc && <p className="text-gray-600 text-xs mb-4">{schema.doc}</p>}
+      </div>
+
+      {/* Fields */}
+      <div ref={fieldsContainerRef} className="flex-1 px-4 pb-4 overflow-auto">
+        {schema.fields && schema.fields.length > 0 ? (
+          schema.fields.map((field: any) => (
+            <AvroField key={field.name} field={field} level={0} expand={expandAll} showRequired={showRequiredBool} />
+          ))
+        ) : (
+          <div className="text-center py-8 text-gray-400">
+            <p className="text-sm">No fields defined</p>
+          </div>
+        )}
+
+        {searchQuery && currentMatches.length === 0 && (
+          <div className="text-center py-8">
+            <div className="text-gray-400 text-sm">
+              <svg className="mx-auto h-12 w-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+              <p>No fields match your search</p>
+              <p className="text-xs mt-1">Try a different search term or clear the search to see all fields</p>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <style>{`
+        .search-dimmed {
+          opacity: 0.4;
+          transition: opacity 0.2s ease;
+        }
+
+        .search-match {
+          opacity: 1;
+          transition: opacity 0.2s ease;
+        }
+
+        .search-current-match {
+          background-color: rgba(59, 130, 246, 0.1);
+          border-left: 3px solid #3b82f6;
+          padding-left: 8px;
+          margin-left: -11px;
+          transition: all 0.2s ease;
+        }
+      `}</style>
+    </div>
+  );
+}

package/eventcatalog/src/components/SchemaExplorer/DiffViewer.tsx

@@ -0,0 +1,102 @@
+import { ArrowsPointingOutIcon } from '@heroicons/react/24/outline';
+import type { VersionDiff } from './types';
+
+interface DiffViewerProps {
+  diffs: VersionDiff[];
+  onOpenFullscreen?: () => void;
+  apiAccessEnabled?: boolean;
+}
+
+export default function DiffViewer({ diffs, onOpenFullscreen, apiAccessEnabled = false }: DiffViewerProps) {
+  if (diffs.length === 0) return null;
+
+  return (
+    <div className="h-full overflow-auto p-4">
+      <div className="mb-4 flex items-start justify-between">
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">Version History</h3>
+          <p className="text-sm text-gray-600">
+            {apiAccessEnabled
+              ? `Showing ${diffs.length} version comparison${diffs.length !== 1 ? 's' : ''}`
+              : 'Compare schema versions side-by-side'}
+          </p>
+        </div>
+        {onOpenFullscreen && apiAccessEnabled && (
+          <button
+            onClick={onOpenFullscreen}
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+            title="Open in fullscreen"
+          >
+            <ArrowsPointingOutIcon className="h-4 w-4" />
+            Fullscreen
+          </button>
+        )}
+      </div>
+      {apiAccessEnabled ? (
+        <div className="space-y-8">
+          {diffs.map((diff, index) => (
+            <div key={`${diff.newerVersion}-${diff.olderVersion}`} className="border border-gray-200 rounded-lg overflow-hidden">
+              <div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
+                <div className="flex items-center justify-between">
+                  <div className="text-sm">
+                    <span className="font-semibold text-gray-900">v{diff.newerVersion}</span>
+                    <span className="text-gray-500 mx-2">→</span>
+                    <span className="font-semibold text-gray-900">v{diff.olderVersion}</span>
+                  </div>
+                  <span className="text-xs text-gray-500">
+                    {index === 0 ? 'Latest change' : `${index + 1} version${index + 1 !== 1 ? 's' : ''} ago`}
+                  </span>
+                </div>
+              </div>
+              <div className="bg-white relative">
+                <div dangerouslySetInnerHTML={{ __html: diff.diffHtml }} />
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="bg-white border border-purple-200 rounded-lg p-8">
+          <div className="flex flex-col items-center text-center max-w-md mx-auto">
+            <div className="flex-shrink-0 mb-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-16 w-16 text-purple-600"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                />
+              </svg>
+            </div>
+            <h4 className="text-xl font-semibold text-gray-900 mb-2">Upgrade to Scale</h4>
+            <p className="text-sm text-gray-600 mb-6">
+              Compare schema versions side-by-side with visual diffs. Track breaking changes, see exactly what changed between
+              versions, and maintain better schema governance.
+            </p>
+            <a
+              href="https://eventcatalog.cloud"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700 transition-colors"
+            >
+              Start 14-day free trial
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}