@eventcatalog/core 3.0.0-beta.25 → 3.0.0-beta.27

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

@@ -1,4 +1,5 @@
-import { ChevronUpIcon, ChevronDownIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
+import { ChevronUpIcon, ChevronDownIcon, ClipboardDocumentIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { CommandLineIcon, LockClosedIcon } from '@heroicons/react/24/solid';
 import type { SchemaItem } from './types';
 
 interface ApiAccessSectionProps {
@@ -27,109 +28,113 @@ export default function ApiAccessSection({
     apiPath = `/api/schemas/${message.collection}/${message.data.id}/${message.data.version}`;
   }
 
-  const curlCommand = typeof window !== 'undefined' ? `curl -X GET "${window.location.origin}${apiPath}"` : '';
+  const fullUrl = typeof window !== 'undefined' ? `${window.location.origin}${apiPath}` : apiPath;
+  const curlCommand = `curl ${fullUrl}`;
+  const isCopied = copiedId === `${message.data.id}-api`;
 
   return (
-    <div className="flex-shrink-0 border-b border-gray-200">
+    <div className="flex-shrink-0 border-b border-gray-100">
       <button
         onClick={onToggle}
-        className="w-full flex items-center justify-between px-4 py-1.5 text-left hover:bg-gray-50 transition-colors"
+        className="w-full flex items-center justify-between px-4 py-2 text-left hover:bg-gray-50/50 transition-colors"
       >
         <div className="flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-4 w-4 text-gray-600"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-            />
-          </svg>
-          <span className="text-xs font-semibold text-gray-900">API Access</span>
-          <span className="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800">
-            Scale
-          </span>
+          <CommandLineIcon className="h-3.5 w-3.5 text-gray-700" />
+          <span className="text-xs font-medium text-gray-700">API</span>
+          {!apiAccessEnabled && (
+            <span className="inline-flex items-center gap-1 rounded bg-purple-50 px-1.5 py-0.5 text-[10px] font-medium text-purple-600 border border-purple-100">
+              <LockClosedIcon className="h-2.5 w-2.5" />
+              Scale
+            </span>
+          )}
         </div>
-        {isExpanded ? <ChevronUpIcon className="h-4 w-4 text-gray-600" /> : <ChevronDownIcon className="h-4 w-4 text-gray-600" />}
+        {isExpanded ? (
+          <ChevronUpIcon className="h-3.5 w-3.5 text-gray-400" />
+        ) : (
+          <ChevronDownIcon className="h-3.5 w-3.5 text-gray-400" />
+        )}
       </button>
 
       {isExpanded && (
-        <div className="px-4 pb-2 bg-gray-50">
+        <div className="px-4 pb-3">
           {apiAccessEnabled ? (
-            <>
-              <p className="text-xs text-gray-600 mb-2">Access this schema programmatically via API</p>
-              <div className="bg-gray-900 rounded-md p-3">
-                <div className="flex items-start justify-between mb-2">
-                  <span className="text-xs text-gray-400 font-mono">GET</span>
-                  <button
-                    onClick={() => onCopy(curlCommand, `${message.data.id}-api`)}
-                    className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-300 hover:text-white transition-colors"
-                    title="Copy curl command"
-                  >
-                    <ClipboardDocumentIcon className="h-3.5 w-3.5" />
-                    {copiedId === `${message.data.id}-api` ? 'Copied!' : 'Copy'}
-                  </button>
-                </div>
-                <code className="block text-xs text-green-400 font-mono break-all">{apiPath}</code>
-                <div className="mt-3 pt-3 border-t border-gray-700">
-                  <p className="text-xs text-gray-400 mb-2">Example:</p>
-                  <code className="block text-xs text-gray-300 font-mono whitespace-pre-wrap break-all">{curlCommand}</code>
-                </div>
+            <div className="space-y-2">
+              {/* Endpoint */}
+              <div className="flex items-center gap-2 bg-gray-900 rounded-md px-3 py-2">
+                <span className="text-[10px] font-semibold text-emerald-400 uppercase tracking-wide">GET</span>
+                <code className="flex-1 text-[11px] text-gray-300 font-mono truncate">{apiPath}</code>
+                <button
+                  onClick={() => onCopy(fullUrl, `${message.data.id}-api`)}
+                  className={`flex-shrink-0 p-1 rounded transition-colors ${
+                    isCopied ? 'text-emerald-400' : 'text-gray-500 hover:text-gray-300'
+                  }`}
+                  title="Copy URL"
+                >
+                  {isCopied ? <CheckIcon className="h-3.5 w-3.5" /> : <ClipboardDocumentIcon className="h-3.5 w-3.5" />}
+                </button>
+              </div>
+
+              {/* Quick copy buttons */}
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => onCopy(curlCommand, `${message.data.id}-curl`)}
+                  className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
+                    copiedId === `${message.data.id}-curl`
+                      ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
+                      : 'text-gray-500 border-gray-200 hover:bg-gray-50 hover:text-gray-700'
+                  }`}
+                >
+                  {copiedId === `${message.data.id}-curl` ? (
+                    <>
+                      <CheckIcon className="h-3 w-3" />
+                      Copied
+                    </>
+                  ) : (
+                    <>
+                      <ClipboardDocumentIcon className="h-3 w-3" />
+                      Copy cURL
+                    </>
+                  )}
+                </button>
+                <button
+                  onClick={() => onCopy(fullUrl, `${message.data.id}-url`)}
+                  className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
+                    copiedId === `${message.data.id}-url`
+                      ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
+                      : 'text-gray-500 border-gray-200 hover:bg-gray-50 hover:text-gray-700'
+                  }`}
+                >
+                  {copiedId === `${message.data.id}-url` ? (
+                    <>
+                      <CheckIcon className="h-3 w-3" />
+                      Copied
+                    </>
+                  ) : (
+                    <>
+                      <ClipboardDocumentIcon className="h-3 w-3" />
+                      Copy URL
+                    </>
+                  )}
+                </button>
               </div>
-            </>
+            </div>
           ) : (
-            <div className="bg-white border border-purple-200 rounded-md p-4">
-              <div className="flex items-start gap-3">
-                <div className="flex-shrink-0">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5 text-purple-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-                    />
-                  </svg>
-                </div>
-                <div className="flex-1">
-                  <h4 className="text-sm font-semibold text-gray-900 mb-1">Upgrade to Scale</h4>
-                  <p className="text-xs text-gray-600 mb-3">
-                    Access your schemas programmatically via API. Perfect for CI/CD pipelines, automation, and integrations.
-                  </p>
-                  <a
-                    href="https://eventcatalog.cloud"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs 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-3.5 w-3.5"
-                      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 className="flex items-center justify-between gap-3 bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-100 rounded-md px-3 py-2.5">
+              <div className="flex-1 min-w-0">
+                <p className="text-xs font-medium text-gray-700">Access schemas via API</p>
+                <p className="text-[10px] text-gray-500 mt-0.5">CI/CD, automation & integrations</p>
               </div>
+              <a
+                href="https://eventcatalog.cloud"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex-shrink-0 inline-flex items-center gap-1 px-2.5 py-1.5 text-[11px] font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700 transition-colors"
+              >
+                Try Scale
+                <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="M9 5l7 7-7 7" />
+                </svg>
+              </a>
             </div>
           )}
         </div>

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

@@ -0,0 +1,144 @@
+import { ClipboardDocumentIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { CommandLineIcon, LockClosedIcon } from '@heroicons/react/24/solid';
+import type { SchemaItem } from './types';
+
+interface ApiContentViewerProps {
+  message: SchemaItem;
+  onCopy: (content: string, id: string) => void;
+  copiedId: string | null;
+  apiAccessEnabled?: boolean;
+}
+
+export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessEnabled = false }: ApiContentViewerProps) {
+  // Generate API path based on collection type
+  let apiPath = '';
+  if (message.collection === 'services') {
+    const specType = message.specType || 'openapi';
+    apiPath = `/api/schemas/services/${message.data.id}/${message.data.version}/${specType}`;
+  } else {
+    apiPath = `/api/schemas/${message.collection}/${message.data.id}/${message.data.version}`;
+  }
+
+  const fullUrl = typeof window !== 'undefined' ? `${window.location.origin}${apiPath}` : apiPath;
+  const curlCommand = `curl ${fullUrl}`;
+
+  if (!apiAccessEnabled) {
+    return (
+      <div className="h-full flex items-center justify-center p-8">
+        <div className="max-w-md text-center">
+          <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-purple-100 to-indigo-100 border border-purple-200">
+            <LockClosedIcon className="h-8 w-8 text-purple-600" />
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">API Access</h3>
+          <p className="text-sm text-gray-600 mb-6">
+            Access your schemas programmatically via REST API. Perfect for CI/CD pipelines, automation, and integrations with your
+            development workflow.
+          </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-lg hover:bg-purple-700 transition-colors"
+          >
+            Upgrade to Scale
+            <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="M9 5l7 7-7 7" />
+            </svg>
+          </a>
+          <p className="text-xs text-gray-500 mt-3">Start your 14-day free trial</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto p-4">
+      <div className="max-w-2xl">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-6">
+          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100">
+            <CommandLineIcon className="h-5 w-5 text-gray-700" />
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-gray-900">API Access</h3>
+            <p className="text-xs text-gray-500">Access this schema programmatically</p>
+          </div>
+        </div>
+
+        {/* Endpoint Card */}
+        <div className="bg-gray-900 rounded-lg overflow-hidden mb-4">
+          <div className="flex items-center justify-between px-4 py-2 border-b border-gray-700">
+            <span className="text-xs font-medium text-gray-400">Endpoint</span>
+            <button
+              onClick={() => onCopy(fullUrl, `${message.data.id}-url`)}
+              className={`inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded transition-colors ${
+                copiedId === `${message.data.id}-url` ? 'text-emerald-400' : 'text-gray-400 hover:text-white'
+              }`}
+            >
+              {copiedId === `${message.data.id}-url` ? (
+                <>
+                  <CheckIcon className="h-3.5 w-3.5" />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <ClipboardDocumentIcon className="h-3.5 w-3.5" />
+                  Copy URL
+                </>
+              )}
+            </button>
+          </div>
+          <div className="px-4 py-3">
+            <div className="flex items-center gap-3">
+              <span className="px-2 py-1 text-xs font-bold text-emerald-400 bg-emerald-400/10 rounded">GET</span>
+              <code className="text-sm text-gray-300 font-mono break-all">{apiPath}</code>
+            </div>
+          </div>
+        </div>
+
+        {/* cURL Example */}
+        <div className="bg-gray-900 rounded-lg overflow-hidden mb-6">
+          <div className="flex items-center justify-between px-4 py-2 border-b border-gray-700">
+            <span className="text-xs font-medium text-gray-400">cURL Example</span>
+            <button
+              onClick={() => onCopy(curlCommand, `${message.data.id}-curl`)}
+              className={`inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded transition-colors ${
+                copiedId === `${message.data.id}-curl` ? 'text-emerald-400' : 'text-gray-400 hover:text-white'
+              }`}
+            >
+              {copiedId === `${message.data.id}-curl` ? (
+                <>
+                  <CheckIcon className="h-3.5 w-3.5" />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <ClipboardDocumentIcon className="h-3.5 w-3.5" />
+                  Copy
+                </>
+              )}
+            </button>
+          </div>
+          <div className="px-4 py-3">
+            <code className="text-sm text-gray-300 font-mono break-all">{curlCommand}</code>
+          </div>
+        </div>
+
+        {/* Response Info */}
+        <div className="border border-gray-200 rounded-lg p-4">
+          <h4 className="text-xs font-semibold text-gray-900 mb-3">Response</h4>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-gray-500">Content-Type</span>
+              <code className="text-gray-700 bg-gray-100 px-2 py-0.5 rounded">application/json</code>
+            </div>
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-gray-500">Returns</span>
+              <span className="text-gray-700">Raw schema content</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,3 +1,5 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+
 interface PaginationProps {
   currentPage: number;
   totalPages: number;
@@ -8,24 +10,48 @@ export default function Pagination({ currentPage, totalPages, onPageChange }: Pa
   if (totalPages <= 1) return null;
 
   return (
-    <div className="flex-shrink-0 border-t border-gray-200 p-3 bg-gray-50">
-      <div className="flex items-center justify-between text-xs">
+    <div className="flex-shrink-0 border-t border-gray-100 px-3 py-1.5 bg-gray-50/50">
+      <div className="flex items-center justify-between">
         <button
           onClick={() => onPageChange(Math.max(1, currentPage - 1))}
           disabled={currentPage === 1}
-          className="px-3 py-1.5 text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-0.5 px-1.5 py-1 text-xs font-medium text-gray-500 hover:text-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
         >
-          Previous
+          <ChevronLeftIcon className="h-3.5 w-3.5" />
+          Prev
         </button>
-        <span className="text-gray-600">
-          Page {currentPage} of {totalPages}
-        </span>
+        <div className="flex items-center gap-0.5">
+          {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+            let pageNum: number;
+            if (totalPages <= 5) {
+              pageNum = i + 1;
+            } else if (currentPage <= 3) {
+              pageNum = i + 1;
+            } else if (currentPage >= totalPages - 2) {
+              pageNum = totalPages - 4 + i;
+            } else {
+              pageNum = currentPage - 2 + i;
+            }
+            return (
+              <button
+                key={pageNum}
+                onClick={() => onPageChange(pageNum)}
+                className={`w-6 h-6 text-[11px] font-medium rounded transition-all tabular-nums ${
+                  currentPage === pageNum ? 'bg-gray-900 text-white' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700'
+                }`}
+              >
+                {pageNum}
+              </button>
+            );
+          })}
+        </div>
         <button
           onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
           disabled={currentPage === totalPages}
-          className="px-3 py-1.5 text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-0.5 px-1.5 py-1 text-xs font-medium text-gray-500 hover:text-gray-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
         >
           Next
+          <ChevronRightIcon className="h-3.5 w-3.5" />
         </button>
       </div>
     </div>

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

@@ -115,8 +115,8 @@ export default function SchemaContentViewer({
           padding: '0.75rem',
           paddingTop: '2.5rem',
           borderRadius: '0.5rem',
-          fontSize: '0.875rem',
-          lineHeight: '1.6',
+          fontSize: '0.75rem',
+          lineHeight: '1.5',
           height: '100%',
           overflow: 'auto',
         }}