@eventcatalog/core 5.5.2 → 5.6.0

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

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { ClipboardDocumentIcon, ArrowsPointingOutIcon } from '@heroicons/react/24/outline';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { getLanguageForHighlight, SCHEMA_CODE_STYLE } from './utils';
+import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
+
+export const SCHEMA_CODE_ACTION_CLASS =
+  'pointer-events-auto inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-content-hover)/0.9)] text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] backdrop-blur-xs transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.75)] hover:text-[rgb(var(--ec-page-text))]';
+
+interface SchemaCodeBlockProps {
+  code: string;
+  /** The schema's extension or format, see getLanguageForHighlight */
+  extension?: string;
+  onCopy: () => void;
+  isCopied: boolean;
+  onOpenFullscreen?: () => void;
+  /** Extra actions shown before the fullscreen and copy buttons */
+  actions?: ReactNode;
+}
+
+/** Highlighted schema source with line numbers, as shown on the Schema tab of the Schema Explorer and on specification pages */
+export default function SchemaCodeBlock({ code, extension, onCopy, isCopied, onOpenFullscreen, actions }: SchemaCodeBlockProps) {
+  const isDarkMode = useDarkMode();
+
+  return (
+    <div className="relative flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-code-bg))]">
+      <div className="pointer-events-none absolute right-4 top-4 z-10 flex items-center gap-1.5">
+        {actions}
+        {onOpenFullscreen && (
+          <button onClick={onOpenFullscreen} className={`${SCHEMA_CODE_ACTION_CLASS} p-1.5`} title="Open in fullscreen">
+            <ArrowsPointingOutIcon className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <button onClick={onCopy} className={`${SCHEMA_CODE_ACTION_CLASS} px-2 py-1.5`} title="Copy code">
+          <ClipboardDocumentIcon className="h-3 w-3" />
+          {isCopied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-auto">
+        <SyntaxHighlighter
+          renderer={renderHighlightedRows}
+          language={getLanguageForHighlight(extension)}
+          style={isDarkMode ? oneDark : oneLight}
+          customStyle={{ ...SCHEMA_CODE_STYLE, height: '100%' }}
+          showLineNumbers={true}
+          wrapLines={true}
+          wrapLongLines={true}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+}

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

@@ -11,7 +11,8 @@ import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 interface SchemaCodeModalProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
-  message: SchemaItem;
+  // Only what the modal shows, so specification pages can open it too
+  message: Pick<SchemaItem, 'schemaExtension' | 'schemaContent'> & { data: Pick<SchemaItem['data'], 'name' | 'version'> };
   onCopy: () => void;
   isCopied: boolean;
 }

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

@@ -1,15 +1,16 @@
-import { ClipboardDocumentIcon, ArrowsPointingOutIcon } from '@heroicons/react/24/outline';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { buildUrl } from '@utils/url-builder';
 import JSONSchemaViewer from './JSONSchemaViewer';
 import AvroSchemaViewer from './AvroSchemaViewer';
 import ProtobufSchemaViewer from './ProtobufSchemaViewer';
-import { getLanguageForHighlight, SCHEMA_CODE_STYLE } from './utils';
+import SchemaCodeBlock, { SCHEMA_CODE_ACTION_CLASS } from './SchemaCodeBlock';
 import type { SchemaItem } from './types';
-import { useDarkMode } from './useDarkMode';
-import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
+
+const SPEC_URL_SEGMENTS: Record<string, string> = {
+  openapi: 'spec',
+  asyncapi: 'asyncapi',
+  graphql: 'graphql',
+  generic: 'generic',
+};
 
 interface SchemaContentViewerProps {
   message: SchemaItem;
@@ -34,8 +35,6 @@ export default function SchemaContentViewer({
   showRequired = false,
   onOpenFullscreen,
 }: SchemaContentViewerProps) {
-  const isDarkMode = useDarkMode();
-
   if (!message.schemaContent) {
     return (
       <div className="flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]">
@@ -57,73 +56,36 @@ export default function SchemaContentViewer({
     }
   }
 
-  return (
-    <div className="relative flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-code-bg))]">
-      <div className="pointer-events-none absolute right-4 top-4 z-10 flex items-center gap-1.5">
-        {message.collection === 'services' &&
-          (() => {
-            const specType = message.specType || 'openapi';
-            const specFilename = message.specFilenameWithoutExtension || 'schema';
-
-            let urlSegment = 'spec';
-            if (specType === 'asyncapi') {
-              urlSegment = 'asyncapi';
-            } else if (specType === 'graphql') {
-              urlSegment = 'graphql';
-            }
-
-            const specUrl = buildUrl(`/docs/services/${message.data.id}/${message.data.version}/${urlSegment}/${specFilename}`);
+  // Services link to their specification's own page
+  const specUrl =
+    message.collection === 'services'
+      ? buildUrl(
+          `/docs/services/${message.data.id}/${message.data.version}/${SPEC_URL_SEGMENTS[message.specType || 'openapi'] ?? 'spec'}/${message.specFilenameWithoutExtension || 'schema'}`
+        )
+      : undefined;
 
-            return (
-              <a
-                href={specUrl}
-                className="pointer-events-auto inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-content-hover)/0.9)] px-2 py-1 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] backdrop-blur-xs transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.75)] hover:text-[rgb(var(--ec-page-text))]"
-                title="View full specification"
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" 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>
-                View Spec
-              </a>
-            );
-          })()}
-        {onOpenFullscreen && (
-          <button
-            onClick={onOpenFullscreen}
-            className="pointer-events-auto inline-flex items-center rounded-md bg-[rgb(var(--ec-content-hover)/0.9)] p-1.5 text-[rgb(var(--ec-page-text-muted))] backdrop-blur-xs transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.75)] hover:text-[rgb(var(--ec-page-text))]"
-            title="Open in fullscreen"
-          >
-            <ArrowsPointingOutIcon className="h-3.5 w-3.5" />
-          </button>
-        )}
-        <button
-          onClick={onCopy}
-          className="pointer-events-auto inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-content-hover)/0.9)] px-2 py-1.5 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] backdrop-blur-xs transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.75)] hover:text-[rgb(var(--ec-page-text))]"
-          title="Copy code"
-        >
-          <ClipboardDocumentIcon className="h-3 w-3" />
-          {isCopied ? 'Copied!' : 'Copy'}
-        </button>
-      </div>
-
-      <div className="min-h-0 flex-1 overflow-auto">
-        <SyntaxHighlighter
-          renderer={renderHighlightedRows}
-          language={getLanguageForHighlight(message.schemaExtension)}
-          style={isDarkMode ? oneDark : oneLight}
-          customStyle={{ ...SCHEMA_CODE_STYLE, height: '100%' }}
-          showLineNumbers={true}
-          wrapLines={true}
-          wrapLongLines={true}
-        >
-          {message.schemaContent}
-        </SyntaxHighlighter>
-      </div>
-    </div>
+  return (
+    <SchemaCodeBlock
+      code={message.schemaContent}
+      extension={message.schemaExtension}
+      onCopy={onCopy}
+      isCopied={isCopied}
+      onOpenFullscreen={onOpenFullscreen}
+      actions={
+        specUrl && (
+          <a href={specUrl} className={`${SCHEMA_CODE_ACTION_CLASS} px-2 py-1`} title="View full specification">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" 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>
+            View Spec
+          </a>
+        )
+      }
+    />
   );
 }

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

@@ -30,9 +30,10 @@ import SchemaCodeModal from './SchemaCodeModal';
 import SchemaViewerModal from './SchemaViewerModal';
 import {
   copyToClipboard,
+  getSchemaDownloadExtension,
   downloadSchema,
-  getSchemaTypeLabel,
-  ICON_SPECS,
+  getSchemaDisplayLabel,
+  getSchemaIconUrl,
   getSchemaRelationshipReference,
   getSchemaRelationshipHref,
   SCHEMA_RELATIONSHIP_LABELS,
@@ -95,7 +96,7 @@ const SchemaMetadata = ({ message, owners }: { message: SchemaItem; owners: Owne
   const schemaRows: MetadataRow[] = [
     { label: 'Name', value: message.data.name },
     ...(message.schemaName && message.schemaName !== message.data.name ? [{ label: 'Schema', value: message.schemaName }] : []),
-    { label: 'Format', value: getSchemaTypeLabel(message.schemaExtension) },
+    { label: 'Format', value: getSchemaDisplayLabel(message) },
     {
       label: MESSAGE_TYPE_LABELS[message.collection] ? 'Message Type' : 'Resource',
       value: (
@@ -249,7 +250,7 @@ const SchemaVersionsTable = ({
                 {version.data.summary ? <p className="line-clamp-2 max-w-2xl">{version.data.summary}</p> : <span>-</span>}
               </td>
               <td className="whitespace-nowrap px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
-                {getSchemaTypeLabel(version.schemaExtension)}
+                {getSchemaDisplayLabel(version)}
               </td>
               <td className="whitespace-nowrap px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
                 {version.source?.updatedAt ? formatSchemaUpdatedAt(version.source.updatedAt) : '-'}
@@ -343,7 +344,7 @@ export default function SchemaDetailsPanel({
 
   const { color } = getCollectionStyles(message.collection);
   const ext = message.schemaExtension?.toLowerCase() || '';
-  const iconSpec = ICON_SPECS[ext];
+  const iconUrl = getSchemaIconUrl(message);
   const owners = message.data.owners || [];
   const producers = message.data.producers || [];
   const consumers = message.data.consumers || [];
@@ -429,10 +430,13 @@ export default function SchemaDetailsPanel({
   }, [comparing, diffFromItem, diffToItem]);
   const selectedDiffs = selectedDiff ? [selectedDiff] : [];
 
-  // Parse JSON Schema, Avro and Protobuf schemas for the Properties tab
+  // Parse JSON Schema, Avro and Protobuf schemas for the Properties tab. Generic specifications are only shown as code.
   const viewableSchema = useMemo(
-    () => parseSchemaForViewer(message.schemaExtension, message.schemaContent),
-    [message.schemaContent, message.schemaExtension]
+    () =>
+      message.specType === 'generic'
+        ? ({ kind: 'code' } as const)
+        : parseSchemaForViewer(message.schemaExtension, message.schemaContent),
+    [message.schemaContent, message.schemaExtension, message.specType]
   );
   const parsedSchema = viewableSchema.kind === 'json' ? viewableSchema.schema : null;
   const parsedAvroSchema = viewableSchema.kind === 'avro' ? viewableSchema.schema : null;
@@ -457,7 +461,7 @@ export default function SchemaDetailsPanel({
 
   const handleDownload = () => {
     if (!message.schemaContent) return;
-    downloadSchema(message.schemaContent, message.data.id, message.schemaExtension || 'json');
+    downloadSchema(message.schemaContent, message.data.id, getSchemaDownloadExtension(message));
   };
 
   const isCopied = copiedId === message.data.id;
@@ -558,8 +562,8 @@ export default function SchemaDetailsPanel({
             <div className="min-w-0 flex-1">
               <div className="flex min-w-0 items-center gap-3">
                 <div className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-lg bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border)/0.5)]">
-                  {iconSpec ? (
-                    <img src={buildUrl(`/icons/${iconSpec}.svg`, true)} alt={`${ext} icon`} className="h-5 w-5 schema-icon" />
+                  {iconUrl ? (
+                    <img src={iconUrl} alt={`${ext} icon`} className="h-5 w-5 schema-icon" />
                   ) : (
                     <span className="text-xs font-bold font-mono text-[rgb(var(--ec-page-text-muted))]">{'{ }'}</span>
                   )}