@eventcatalog/core 2.62.1 → 2.64.0

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

@@ -0,0 +1,174 @@
+import { MagnifyingGlassIcon, XMarkIcon, FunnelIcon, ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import type { CollectionMessageTypes } from '@types';
+import { getSchemaTypeLabel } from './utils';
+import type { SchemaItem } from './types';
+
+interface SchemaFiltersProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  selectedType: 'all' | CollectionMessageTypes | 'services';
+  onTypeChange: (type: 'all' | CollectionMessageTypes | 'services') => void;
+  selectedSchemaType: string;
+  onSchemaTypeChange: (type: string) => void;
+  schemaTypes: string[];
+  latestMessages: SchemaItem[];
+  filtersExpanded: boolean;
+  onToggleExpanded: () => void;
+  searchInputRef: React.RefObject<HTMLInputElement>;
+  isMounted: boolean;
+}
+
+export default function SchemaFilters({
+  searchQuery,
+  onSearchChange,
+  selectedType,
+  onTypeChange,
+  selectedSchemaType,
+  onSchemaTypeChange,
+  schemaTypes,
+  latestMessages,
+  filtersExpanded,
+  onToggleExpanded,
+  searchInputRef,
+  isMounted,
+}: SchemaFiltersProps) {
+  const activeFilterCount = [searchQuery, selectedType !== 'all', selectedSchemaType !== 'all'].filter(Boolean).length;
+
+  return (
+    <div className="flex-shrink-0 border-b border-gray-200 bg-gray-50">
+      {/* Filter Header */}
+      <button
+        onClick={onToggleExpanded}
+        className="w-full flex items-center justify-between p-3 hover:bg-gray-100 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <FunnelIcon className="h-4 w-4 text-gray-600" />
+          <span className="text-xs font-semibold text-gray-900">Filters</span>
+          {activeFilterCount > 0 && (
+            <span className="inline-flex items-center rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-white">
+              {activeFilterCount}
+            </span>
+          )}
+        </div>
+        {filtersExpanded ? (
+          <ChevronUpIcon className="h-4 w-4 text-gray-600" />
+        ) : (
+          <ChevronDownIcon className="h-4 w-4 text-gray-600" />
+        )}
+      </button>
+
+      {/* Collapsible Filter Content - Only render after mount to prevent FOUC */}
+      {isMounted && filtersExpanded && (
+        <div className="p-3 pt-0">
+          {/* Search */}
+          <div className="mb-3">
+            <label htmlFor="search" className="block text-xs font-medium text-gray-700 mb-1.5">
+              Search
+            </label>
+            <div className="relative">
+              <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5">
+                <MagnifyingGlassIcon className="h-4 w-4 text-gray-400" />
+              </div>
+              <input
+                ref={searchInputRef}
+                type="text"
+                id="search"
+                placeholder="Search schemas..."
+                value={searchQuery}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className="w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary text-xs pl-8 pr-8 py-1.5 border"
+              />
+              {searchQuery && (
+                <button onClick={() => onSearchChange('')} className="absolute inset-y-0 right-0 flex items-center pr-2.5">
+                  <XMarkIcon className="h-4 w-4 text-gray-400 hover:text-gray-600" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Message Type Filter */}
+          <div className="mb-3">
+            <label htmlFor="messageType" className="block text-xs font-medium text-gray-700 mb-1.5">
+              Message Type
+            </label>
+            <select
+              id="messageType"
+              value={selectedType}
+              onChange={(e) => onTypeChange(e.target.value as typeof selectedType)}
+              className="w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary text-xs px-2.5 py-1.5 border"
+            >
+              <option value="all">All ({latestMessages.length})</option>
+              <option value="events">Events ({latestMessages.filter((m) => m.collection === 'events').length})</option>
+              <option value="commands">Commands ({latestMessages.filter((m) => m.collection === 'commands').length})</option>
+              <option value="queries">Queries ({latestMessages.filter((m) => m.collection === 'queries').length})</option>
+              <option value="services">Services ({latestMessages.filter((m) => m.collection === 'services').length})</option>
+            </select>
+          </div>
+
+          {/* Schema Type Filter */}
+          <div className="mb-3">
+            <label htmlFor="schemaType" className="block text-xs font-medium text-gray-700 mb-1.5">
+              Schema Format
+            </label>
+            <select
+              id="schemaType"
+              value={selectedSchemaType}
+              onChange={(e) => onSchemaTypeChange(e.target.value)}
+              className="w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary text-xs px-2.5 py-1.5 border"
+            >
+              <option value="all">All Formats</option>
+              {schemaTypes.map((type) => (
+                <option key={type} value={type}>
+                  {getSchemaTypeLabel(type)} ({latestMessages.filter((m) => m.schemaExtension?.toLowerCase() === type).length})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Active filters */}
+          {activeFilterCount > 0 && (
+            <div className="pt-2 border-t border-gray-200">
+              <div className="flex flex-wrap items-center gap-1.5">
+                {searchQuery && (
+                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-blue-100 text-blue-800 rounded">
+                    {searchQuery.substring(0, 15)}
+                    {searchQuery.length > 15 ? '...' : ''}
+                    <button onClick={() => onSearchChange('')}>
+                      <XMarkIcon className="h-3 w-3" />
+                    </button>
+                  </span>
+                )}
+                {selectedType !== 'all' && (
+                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-blue-100 text-blue-800 rounded">
+                    {selectedType}
+                    <button onClick={() => onTypeChange('all')}>
+                      <XMarkIcon className="h-3 w-3" />
+                    </button>
+                  </span>
+                )}
+                {selectedSchemaType !== 'all' && (
+                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-blue-100 text-blue-800 rounded">
+                    {getSchemaTypeLabel(selectedSchemaType)}
+                    <button onClick={() => onSchemaTypeChange('all')}>
+                      <XMarkIcon className="h-3 w-3" />
+                    </button>
+                  </span>
+                )}
+                <button
+                  onClick={() => {
+                    onSearchChange('');
+                    onTypeChange('all');
+                    onSchemaTypeChange('all');
+                  }}
+                  className="text-xs text-gray-600 hover:text-gray-900 underline"
+                >
+                  Clear
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { buildUrl } from '@utils/url-builder';
+import { getCollectionStyles } from '@components/Grids/utils';
+import { getSchemaTypeLabel } from './utils';
+import type { SchemaItem } from './types';
+
+interface SchemaListItemProps {
+  message: SchemaItem;
+  isSelected: boolean;
+  versions: SchemaItem[];
+  onClick: () => void;
+  itemRef?: React.RefObject<HTMLButtonElement>;
+}
+
+export default function SchemaListItem({ message, isSelected, versions, onClick, itemRef }: SchemaListItemProps) {
+  const { color, Icon } = getCollectionStyles(message.collection);
+  const hasMultipleVersions = versions.length > 1;
+
+  return (
+    <button
+      ref={itemRef}
+      onClick={onClick}
+      className={`w-full text-left p-4 hover:bg-gray-50 transition-colors ${
+        isSelected ? `bg-${color}-50 border-l-4 border-${color}-500` : 'border-l-4 border-transparent'
+      }`}
+    >
+      <div className="flex items-start gap-3">
+        <Icon className={`h-5 w-5 mt-0.5 flex-shrink-0 ${isSelected ? `text-${color}-600` : `text-${color}-500`}`} />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between gap-2 mb-1.5">
+            <div className="flex items-center gap-2 min-w-0">
+              <h3 className={`text-sm font-semibold truncate ${isSelected ? `text-${color}-900` : 'text-gray-900'}`}>
+                {message.data.name}
+              </h3>
+              <span className="text-xs text-gray-500 flex-shrink-0">v{message.data.version}</span>
+            </div>
+            <div className="flex items-center gap-1 flex-shrink-0">
+              <span className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800">
+                {(() => {
+                  const ext = message.schemaExtension?.toLowerCase();
+                  if (
+                    ext === 'openapi' ||
+                    ext === 'asyncapi' ||
+                    ext === 'graphql' ||
+                    ext === 'avro' ||
+                    ext === 'json' ||
+                    ext === 'proto'
+                  ) {
+                    // Map json extension to json-schema icon
+                    const iconName = ext === 'json' ? 'json-schema' : ext;
+                    const iconPath = buildUrl(`/icons/${iconName}.svg`, true);
+                    return (
+                      <>
+                        <img src={iconPath} alt={`${ext} icon`} className="h-3 w-3" />
+                        {getSchemaTypeLabel(message.schemaExtension)}
+                      </>
+                    );
+                  }
+                  return getSchemaTypeLabel(message.schemaExtension);
+                })()}
+              </span>
+              {hasMultipleVersions && (
+                <span className="inline-flex items-center rounded-full bg-blue-100 px-1 py-0.5 text-xs font-medium text-blue-700">
+                  {versions.length} versions
+                </span>
+              )}
+            </div>
+          </div>
+          {message.data.summary && <p className="text-xs text-gray-600 line-clamp-2">{message.data.summary}</p>}
+        </div>
+      </div>
+    </button>
+  );
+}

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

@@ -0,0 +1,77 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { XMarkIcon, ArrowsPointingOutIcon } from '@heroicons/react/24/outline';
+import JSONSchemaViewer from './JSONSchemaViewer';
+import AvroSchemaViewer from './AvroSchemaViewer';
+import type { SchemaItem } from './types';
+
+interface SchemaViewerModalProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  message: SchemaItem;
+  parsedSchema: any;
+  parsedAvroSchema?: any;
+}
+
+export default function SchemaViewerModal({
+  isOpen,
+  onOpenChange,
+  message,
+  parsedSchema,
+  parsedAvroSchema,
+}: SchemaViewerModalProps) {
+  if (!parsedSchema && !parsedAvroSchema) return null;
+
+  const isAvro = !!parsedAvroSchema;
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
+        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-white shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100] flex flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
+            <div className="flex items-center gap-3">
+              <ArrowsPointingOutIcon className="h-6 w-6 text-gray-500" />
+              <div>
+                <Dialog.Title className="text-xl font-semibold text-gray-900">{message.data.name}</Dialog.Title>
+                <Dialog.Description className="text-sm text-gray-600 mt-1">
+                  v{message.data.version} · {isAvro ? 'Avro' : 'JSON'} Schema
+                </Dialog.Description>
+              </div>
+            </div>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
+                aria-label="Close"
+              >
+                <XMarkIcon className="h-6 w-6" />
+              </button>
+            </Dialog.Close>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-hidden p-6">
+            {isAvro ? (
+              <AvroSchemaViewer schema={parsedAvroSchema} expand={true} search={true} />
+            ) : (
+              <JSONSchemaViewer schema={parsedSchema} expand={true} search={true} />
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex justify-end p-4 border-t border-gray-200 flex-shrink-0">
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+              >
+                Close
+              </button>
+            </Dialog.Close>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

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

@@ -0,0 +1,72 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { XMarkIcon, ArrowsPointingOutIcon } from '@heroicons/react/24/outline';
+import DiffViewer from './DiffViewer';
+import type { VersionDiff } from './types';
+
+interface VersionHistoryModalProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  diffs: VersionDiff[];
+  messageName: string;
+  apiAccessEnabled?: boolean;
+}
+
+export default function VersionHistoryModal({
+  isOpen,
+  onOpenChange,
+  diffs,
+  messageName,
+  apiAccessEnabled = false,
+}: VersionHistoryModalProps) {
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
+        <Dialog.Content className="fixed inset-4 md:inset-8 rounded-lg bg-white shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100] flex flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
+            <div className="flex items-center gap-3">
+              <ArrowsPointingOutIcon className="h-6 w-6 text-gray-500" />
+              <div>
+                <Dialog.Title className="text-xl font-semibold text-gray-900">Version History</Dialog.Title>
+                <Dialog.Description className="text-sm text-gray-600 mt-1">{messageName}</Dialog.Description>
+              </div>
+            </div>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
+                aria-label="Close"
+              >
+                <XMarkIcon className="h-6 w-6" />
+              </button>
+            </Dialog.Close>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-6">
+            {diffs.length > 0 ? (
+              <DiffViewer diffs={diffs} apiAccessEnabled={apiAccessEnabled} />
+            ) : (
+              <div className="flex items-center justify-center h-full">
+                <p className="text-gray-500 text-center">No version history available</p>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex justify-end p-4 border-t border-gray-200 flex-shrink-0">
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+              >
+                Close
+              </button>
+            </Dialog.Close>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

package/eventcatalog/src/components/SchemaExplorer/types.ts

@@ -0,0 +1,45 @@
+import type { CollectionMessageTypes } from '@types';
+
+export interface Producer {
+  id: string;
+  version: string;
+}
+
+export interface Consumer {
+  id: string;
+  version: string;
+}
+
+export interface Owner {
+  id: string;
+  name: string;
+  type: 'users' | 'teams';
+  href: string;
+}
+
+export interface SchemaItem {
+  collection: CollectionMessageTypes | 'services';
+  data: {
+    id: string;
+    name: string;
+    version: string;
+    summary?: string;
+    schemaPath?: string;
+    producers?: Producer[];
+    consumers?: Consumer[];
+    owners?: Owner[];
+  };
+  schemaContent?: string;
+  schemaExtension?: string;
+  specType?: string;
+  specName?: string;
+  specFilenameWithoutExtension?: string;
+}
+
+export interface VersionDiff {
+  newerVersion: string;
+  olderVersion: string;
+  diffHtml: string;
+  newerContent: string;
+  olderContent: string;
+}

package/eventcatalog/src/components/SchemaExplorer/utils.ts

@@ -0,0 +1,81 @@
+export const getLanguageForHighlight = (extension?: string): string => {
+  if (!extension) return 'json';
+  const ext = extension.toLowerCase();
+  switch (ext) {
+    case 'avro':
+    case 'avsc':
+    case 'json':
+      return 'json';
+    case 'proto':
+      return 'protobuf';
+    case 'xsd':
+    case 'xml':
+      return 'xml';
+    case 'graphql':
+    case 'gql':
+      return 'graphql';
+    case 'yaml':
+    case 'yml':
+    case 'openapi':
+    case 'asyncapi':
+      return 'yaml';
+    case 'ts':
+    case 'typescript':
+      return 'typescript';
+    case 'js':
+    case 'javascript':
+      return 'javascript';
+    default:
+      return 'json';
+  }
+};
+
+export const getSchemaTypeLabel = (extension?: string): string => {
+  if (!extension) return 'JSON';
+  const ext = extension.toLowerCase();
+  switch (ext) {
+    case 'avro':
+    case 'avsc':
+      return 'Avro';
+    case 'proto':
+      return 'Protobuf';
+    case 'xsd':
+      return 'XML Schema';
+    case 'graphql':
+    case 'gql':
+      return 'GraphQL';
+    case 'yaml':
+    case 'yml':
+      return 'YAML';
+    case 'json':
+      return 'JSON Schema';
+    case 'openapi':
+      return 'OpenAPI';
+    case 'asyncapi':
+      return 'AsyncAPI';
+    default:
+      return ext.toUpperCase();
+  }
+};
+
+export const copyToClipboard = async (content: string): Promise<boolean> => {
+  try {
+    await navigator.clipboard.writeText(content);
+    return true;
+  } catch (err) {
+    console.error('Failed to copy:', err);
+    return false;
+  }
+};
+
+export const downloadSchema = (content: string, filename: string, extension: string) => {
+  const blob = new Blob([content], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${filename}.${extension}`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};

package/eventcatalog/src/components/SideNav/ListViewSideBar/index.tsx

@@ -312,6 +312,8 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
   const [isInitialized, setIsInitialized] = useState(false);
   const [isExpanded, setIsExpanded] = useState(true);
+  const [isSearchPinned, setIsSearchPinned] = useState(false);
+  const [lastScrollTop, setLastScrollTop] = useState(0);
   const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>(() => {
     if (typeof window !== 'undefined') {
       const saved = window.localStorage.getItem(STORAGE_KEY);
@@ -471,6 +473,31 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
     }
   }, [debouncedSearchTerm]);
 
+  // Handle scroll for sticky search bar
+  useEffect(() => {
+    const nav = navRef.current;
+    if (!nav) return;
+
+    const handleScroll = () => {
+      const scrollTop = nav.scrollTop;
+      const scrollThreshold = 50; // Pin after scrolling 50px
+
+      // Scrolling down past threshold
+      if (scrollTop > scrollThreshold && scrollTop > lastScrollTop) {
+        setIsSearchPinned(true);
+      }
+      // Scrolling up near the top
+      else if (scrollTop <= scrollThreshold) {
+        setIsSearchPinned(false);
+      }
+
+      setLastScrollTop(scrollTop);
+    };
+
+    nav.addEventListener('scroll', handleScroll);
+    return () => nav.removeEventListener('scroll', handleScroll);
+  }, [lastScrollTop]);
+
   // Store collapsed groups in local storage
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -872,8 +899,12 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
     !filteredData.messagesNotInService?.length;
 
   return (
-    <nav ref={navRef} className="space-y-4 text-gray-800 px-3 py-4">
-      <div className="flex gap-2">
+    <nav ref={navRef} className="space-y-4 text-gray-800 px-3 py-4 overflow-auto h-full">
+      <div
+        className={`flex gap-2 transition-all duration-200 ${
+          isSearchPinned ? 'sticky -top-5 z-10 bg-white shadow-md -mx-3 px-3 py-2 border-b border-gray-200' : ''
+        }`}
+      >
         <input
           type="text"
           value={searchTerm}

package/eventcatalog/src/components/Tables/Table.tsx

@@ -14,7 +14,7 @@ import DebouncedInput from './DebouncedInput';
 
 import { getColumnsByCollection } from './columns';
 import { useEffect, useMemo, useState } from 'react';
-import type { CollectionMessageTypes } from '@types';
+import type { CollectionMessageTypes, TableConfiguration } from '@types';
 import { isSameVersion } from '@utils/collections/util';
 
 declare module '@tanstack/react-table' {
@@ -146,12 +146,14 @@ export const Table = <T extends TCollectionTypes>({
   mode = 'simple',
   checkboxLatestId,
   checkboxDraftsId,
+  tableConfiguration,
 }: {
   data: TData<T>[];
   collection: T;
   checkboxLatestId: string;
   checkboxDraftsId: string;
   mode?: 'simple' | 'full';
+  tableConfiguration?: TableConfiguration;
 }) => {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
@@ -215,7 +217,10 @@ export const Table = <T extends TCollectionTypes>({
     });
   }, [initialData, showOnlyLatest, onlyShowDrafts]);
 
-  const columns = useMemo(() => getColumnsByCollection(collection), [collection]);
+  const columns = useMemo(
+    () => getColumnsByCollection(collection, tableConfiguration ?? ({ columns: {} } as TableConfiguration)),
+    [collection, tableConfiguration]
+  );
 
   const table = useReactTable({
     data: filteredData,
@@ -229,6 +234,9 @@ export const Table = <T extends TCollectionTypes>({
     getPaginationRowModel: getPaginationRowModel(),
     state: {
       columnFilters,
+      columnVisibility: Object.fromEntries(
+        Object.entries(tableConfiguration?.columns ?? {}).map(([key, value]) => [key, value.visible ?? true])
+      ),
     },
   });