@eventcatalog/core 3.0.0-beta.8 → 3.0.0

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

@@ -1,4 +1,12 @@
-import { ClipboardDocumentIcon, ArrowDownTrayIcon, CodeBracketIcon, TableCellsIcon } from '@heroicons/react/24/outline';
+import {
+  ClipboardDocumentIcon,
+  ArrowDownTrayIcon,
+  CodeBracketIcon,
+  TableCellsIcon,
+  ArrowTopRightOnSquareIcon,
+  ClockIcon,
+} from '@heroicons/react/24/outline';
+import { CheckIcon, CommandLineIcon } from '@heroicons/react/24/solid';
 import { buildUrl } from '@utils/url-builder';
 import { getCollectionStyles } from '@components/Grids/utils';
 import { getSchemaTypeLabel } from './utils';
@@ -12,8 +20,8 @@ interface SchemaDetailsHeaderProps {
   onCopy: () => void;
   onDownload: () => void;
   isCopied: boolean;
-  schemaViewMode: 'code' | 'schema' | 'diff';
-  onViewModeChange: (mode: 'code' | 'schema' | 'diff') => void;
+  schemaViewMode: 'code' | 'schema' | 'diff' | 'api';
+  onViewModeChange: (mode: 'code' | 'schema' | 'diff' | 'api') => void;
   hasParsedSchema: boolean;
   hasDiffs: boolean;
   diffCount: number;
@@ -36,79 +44,89 @@ export default function SchemaDetailsHeader({
   const { color, Icon } = getCollectionStyles(message.collection);
   const hasMultipleVersions = availableVersions.length > 1;
 
+  // Get schema icon
+  const ext = message.schemaExtension?.toLowerCase();
+  const hasSchemaIcon = ['openapi', 'asyncapi', 'graphql', 'avro', 'json', 'proto'].includes(ext || '');
+  const iconName = ext === 'json' ? 'json-schema' : ext;
+
   return (
-    <div className="flex-shrink-0 border-b border-gray-200 p-3">
-      <div className="flex items-start justify-between mb-3">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1.5">
-            <Icon className={`h-5 w-5 text-${color}-500 flex-shrink-0`} />
-            <a
-              href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
-              className={`text-lg font-semibold text-gray-900 hover:text-${color}-600 hover:underline truncate`}
-            >
-              {message.data.name}
-            </a>
-            {hasMultipleVersions ? (
-              <select
-                value={selectedVersion || message.data.version}
-                onChange={(e) => onVersionChange(e.target.value)}
-                className="text-xs text-gray-700 bg-white border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+    <div className="flex-shrink-0 border-b border-gray-200 bg-white">
+      {/* Main Header */}
+      <div className="px-4 py-3">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            {/* Title Row */}
+            <div className="flex items-start gap-3">
+              <div
+                className={`flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-lg bg-${color}-50 border border-${color}-100 mt-0.5`}
               >
-                {availableVersions.map((v) => (
-                  <option key={v.data.version} value={v.data.version}>
-                    v{v.data.version}
-                  </option>
-                ))}
-              </select>
-            ) : (
-              <span className="text-xs text-gray-500 flex-shrink-0">v{message.data.version}</span>
-            )}
-          </div>
-          <div className="flex items-center gap-1 mb-2">
-            <span
-              className={`inline-flex items-center rounded-full bg-${color}-100 px-1.5 py-0.5 text-xs font-medium text-${color}-800`}
-            >
-              {message.collection}
-            </span>
-            <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>
+                <Icon className={`h-4.5 w-4.5 text-${color}-600`} />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <h2 className="text-base font-semibold text-gray-900 truncate">{message.data.name}</h2>
+                  {hasMultipleVersions ? (
+                    <div className="relative flex-shrink-0">
+                      <select
+                        value={selectedVersion || message.data.version}
+                        onChange={(e) => onVersionChange(e.target.value)}
+                        className="appearance-none text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md pl-2.5 pr-7 py-1 focus:outline-none focus:ring-1 focus:ring-gray-300 focus:border-gray-300 cursor-pointer hover:bg-gray-100 transition-colors"
+                      >
+                        {availableVersions.map((v) => (
+                          <option key={v.data.version} value={v.data.version}>
+                            v{v.data.version}
+                          </option>
+                        ))}
+                      </select>
+                      <ClockIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-400 pointer-events-none" />
+                    </div>
+                  ) : (
+                    <span className="text-xs text-gray-500 flex-shrink-0 font-medium bg-gray-50 px-2 py-1 rounded-md border border-gray-200">
+                      v{message.data.version}
+                    </span>
+                  )}
+                </div>
+                {/* Tags */}
+                <div className="flex items-center gap-1.5 mt-1">
+                  <span
+                    className={`inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-${color}-50 text-${color}-700 border border-${color}-100`}
+                  >
+                    {message.collection}
+                  </span>
+                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium bg-gray-50 text-gray-600 border border-gray-100">
+                    {hasSchemaIcon && (
+                      <img src={buildUrl(`/icons/${iconName}.svg`, true)} alt={`${ext} icon`} className="h-3 w-3 opacity-70" />
+                    )}
+                    {getSchemaTypeLabel(message.schemaExtension)}
+                  </span>
+                </div>
+                {/* Summary */}
+                {message.data.summary && <p className="text-xs text-gray-500 mt-1.5 line-clamp-1">{message.data.summary}</p>}
+              </div>
+            </div>
           </div>
-          {message.data.summary && <p className="text-xs text-gray-600 line-clamp-2">{message.data.summary}</p>}
+
+          {/* View Docs Button */}
+          <a
+            href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
+            className="flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors"
+          >
+            View docs
+            <ArrowTopRightOnSquareIcon className="h-3.5 w-3.5" />
+          </a>
         </div>
       </div>
 
-      {/* Action Buttons */}
-      <div className="flex items-center gap-2">
+      {/* Action Bar */}
+      <div className="px-4 py-2 bg-gray-50/50 border-t border-gray-100 flex items-center justify-between">
         {/* View Mode Toggle */}
-        <div className="flex items-center gap-1 mr-2 border-r border-gray-300 pr-2">
+        <div className="flex items-center gap-0.5 p-0.5 bg-gray-100/80 rounded-md">
           <button
             onClick={() => onViewModeChange('code')}
-            className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded transition-colors ${
-              schemaViewMode === 'code' ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100'
+            className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
+              schemaViewMode === 'code' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
             }`}
-            title="Code view"
+            title="View raw code"
           >
             <CodeBracketIcon className="h-3.5 w-3.5" />
             Code
@@ -116,10 +134,10 @@ export default function SchemaDetailsHeader({
           {hasParsedSchema && (
             <button
               onClick={() => onViewModeChange('schema')}
-              className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded transition-colors ${
-                schemaViewMode === 'schema' ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100'
+              className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
+                schemaViewMode === 'schema' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
               }`}
-              title="Schema view"
+              title="View as schema"
             >
               <TableCellsIcon className="h-3.5 w-3.5" />
               Schema
@@ -128,53 +146,66 @@ export default function SchemaDetailsHeader({
           {hasDiffs && (
             <button
               onClick={() => onViewModeChange('diff')}
-              className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded transition-colors ${
-                schemaViewMode === 'diff' ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100'
+              className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
+                schemaViewMode === 'diff' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
               }`}
-              title="View version history diffs"
+              title="View version diffs"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-3.5 w-3.5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
+              <ClockIcon className="h-3.5 w-3.5" />
+              History
+              <span
+                className={`ml-0.5 px-1 py-0.5 rounded text-[10px] tabular-nums ${
+                  schemaViewMode === 'diff' ? 'bg-gray-100 text-gray-600' : 'bg-gray-200/60 text-gray-500'
+                }`}
               >
-                <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>
-              Diff ({diffCount})
+                {diffCount}
+              </span>
             </button>
           )}
+          <button
+            onClick={() => onViewModeChange('api')}
+            className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
+              schemaViewMode === 'api' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+            }`}
+            title="API access"
+          >
+            <CommandLineIcon className="h-3.5 w-3.5" />
+            API
+          </button>
         </div>
 
-        <button
-          onClick={onCopy}
-          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="Copy schema to clipboard"
-        >
-          <ClipboardDocumentIcon className="h-4 w-4" />
-          {isCopied ? 'Copied!' : 'Copy'}
-        </button>
-        <button
-          onClick={onDownload}
-          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="Download schema file"
-        >
-          <ArrowDownTrayIcon className="h-4 w-4" />
-          Download
-        </button>
-        <a
-          href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
-          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 ml-auto"
-          title="View full documentation"
-        >
-          View Docs →
-        </a>
+        {/* Action Buttons */}
+        <div className="flex items-center gap-1.5">
+          <button
+            onClick={onCopy}
+            className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md transition-all ${
+              isCopied
+                ? 'bg-green-50 text-green-600 border border-green-200'
+                : 'text-gray-500 bg-white border border-gray-200 hover:bg-gray-50 hover:text-gray-700'
+            }`}
+            title="Copy schema to clipboard"
+          >
+            {isCopied ? (
+              <>
+                <CheckIcon className="h-3.5 w-3.5" />
+                Copied
+              </>
+            ) : (
+              <>
+                <ClipboardDocumentIcon className="h-3.5 w-3.5" />
+                Copy
+              </>
+            )}
+          </button>
+          <button
+            onClick={onDownload}
+            className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-500 bg-white border border-gray-200 rounded-md hover:bg-gray-50 hover:text-gray-700 transition-all"
+            title="Download schema file"
+          >
+            <ArrowDownTrayIcon className="h-3.5 w-3.5" />
+            Download
+          </button>
+        </div>
       </div>
     </div>
   );

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

@@ -3,11 +3,11 @@ import * as Diff from 'diff';
 import { html } from 'diff2html';
 import 'diff2html/bundles/css/diff2html.min.css';
 import SchemaDetailsHeader from './SchemaDetailsHeader';
-import ApiAccessSection from './ApiAccessSection';
 import OwnersSection from './OwnersSection';
 import ProducersConsumersSection from './ProducersConsumersSection';
 import SchemaContentViewer from './SchemaContentViewer';
 import DiffViewer from './DiffViewer';
+import ApiContentViewer from './ApiContentViewer';
 import VersionHistoryModal from './VersionHistoryModal';
 import SchemaCodeModal from './SchemaCodeModal';
 import SchemaViewerModal from './SchemaViewerModal';
@@ -34,8 +34,7 @@ export default function SchemaDetailsPanel({
   showProducersConsumers = true,
 }: SchemaDetailsPanelProps) {
   const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [schemaViewMode, setSchemaViewMode] = useState<'code' | 'schema' | 'diff'>('code');
-  const [apiAccessExpanded, setApiAccessExpanded] = useState(false);
+  const [schemaViewMode, setSchemaViewMode] = useState<'code' | 'schema' | 'diff' | 'api'>('code');
   const [ownersExpanded, setOwnersExpanded] = useState(false);
   const [producersConsumersExpanded, setProducersConsumersExpanded] = useState(false);
   const [isDiffModalOpen, setIsDiffModalOpen] = useState(false);
@@ -160,16 +159,6 @@ export default function SchemaDetailsPanel({
         diffCount={allDiffs.length}
       />
 
-      {/* API Access Section - Always show, but content changes based on Scale access */}
-      <ApiAccessSection
-        message={message}
-        isExpanded={apiAccessExpanded}
-        onToggle={() => setApiAccessExpanded(!apiAccessExpanded)}
-        onCopy={handleCopyCustom}
-        copiedId={copiedId}
-        apiAccessEnabled={apiAccessEnabled}
-      />
-
       {/* Producers and Consumers Section - Only show for messages (not services) */}
       {message.collection !== 'services' && showProducersConsumers && (
         <ProducersConsumersSection
@@ -186,7 +175,9 @@ export default function SchemaDetailsPanel({
 
       {/* Schema Content - Takes full remaining height */}
       <div className="flex-1 overflow-hidden">
-        {schemaViewMode === 'diff' && allDiffs.length > 0 ? (
+        {schemaViewMode === 'api' ? (
+          <ApiContentViewer message={message} onCopy={handleCopyCustom} copiedId={copiedId} apiAccessEnabled={apiAccessEnabled} />
+        ) : schemaViewMode === 'diff' && allDiffs.length > 0 ? (
           <DiffViewer diffs={allDiffs} onOpenFullscreen={() => setIsDiffModalOpen(true)} apiAccessEnabled={apiAccessEnabled} />
         ) : (
           <SchemaContentViewer