@eventcatalog/core 2.24.2 → 2.25.0

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx

@@ -1,7 +1,7 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
-
+import MessageContextMenu from './MessageContextMenu';
 interface Data {
   title: string;
   label: string;
@@ -22,53 +22,55 @@ export default function QueryNode({ data, sourcePosition, targetPosition }: any)
 
   const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
 
-  const renderTarget = true; //showTarget || (targetPosition && producers.length > 0);
-  const renderSource = true; // showSource || (sourcePosition && consumers.length > 0);
+  const renderTarget = true;
+  const renderSource = true;
 
   return (
-    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-green-400')}>
-      <div
-        className={classNames(
-          'bg-gradient-to-b from-green-500 to-green-700 relative flex items-center w-5 justify-center rounded-l-sm text-green-100-500',
-          `border-r-[1px] border-green-500`
-        )}
-      >
-        <MagnifyingGlassIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
-        {mode === 'full' && (
-          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-            Query
-          </span>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
-        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-          <span className="text-xs font-bold block pb-0.5">{name}</span>
-          <div className="flex justify-between">
-            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Query</span>}
-          </div>
+    <MessageContextMenu message={message} messageType="queries">
+      <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-green-400')}>
+        <div
+          className={classNames(
+            'bg-gradient-to-b from-green-500 to-green-700 relative flex items-center w-5 justify-center rounded-l-sm text-green-100-500',
+            `border-r-[1px] border-green-500`
+          )}
+        >
+          <MagnifyingGlassIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+          {mode === 'full' && (
+            <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+              Query
+            </span>
+          )}
         </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-3 py-1">
-              <span className="text-[8px] font-light">{summary}</span>
-            </div>
-            <div className="grid grid-cols-2 gap-x-4 py-1">
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Producers: {producers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Consumers: {consumers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Owners: {owners.length}
-              </span>
+        <div className="p-1 min-w-60 max-w-[min-content]">
+          {renderTarget && <Handle type="target" position={targetPosition} />}
+          {renderSource && <Handle type="source" position={sourcePosition} />}
+          <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+            <span className="text-xs font-bold block pb-0.5">{name}</span>
+            <div className="flex justify-between">
+              <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+              {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Query</span>}
             </div>
           </div>
-        )}
+          {mode === 'full' && (
+            <div className="divide-y divide-gray-200 ">
+              <div className="leading-3 py-1">
+                <span className="text-[8px] font-light">{summary}</span>
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 py-1">
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Producers: {producers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Consumers: {consumers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Owners: {owners.length}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </MessageContextMenu>
   );
 }

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -1,6 +1,8 @@
 import { ServerIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { buildUrl } from '@utils/url-builder';
 
 interface Data {
   label: string;
@@ -19,53 +21,121 @@ function classNames(...classes: any) {
 export default function ServiceNode({ data, sourcePosition, targetPosition }: any) {
   const { label, bgColor = 'bg-blue-500', mode, service } = data as Data;
 
-  const { version, owners = [], sends = [], receives = [], name } = service.data;
+  const { id, version, owners = [], sends = [], receives = [], name, specifications, repository } = service.data;
+  const asyncApiPath = specifications?.asyncapiPath;
+  const openApiPath = specifications?.openapiPath;
+  const repositoryUrl = repository?.url;
 
   return (
-    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-pink-500')}>
-      <div
-        className={classNames(
-          'bg-gradient-to-b from-pink-500 to-pink-700 relative flex items-center w-5 justify-center rounded-l-sm text-red-100-500',
-          `border-r-[1px] border-pink-500`
-        )}
-      >
-        <ServerIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
-        {mode === 'full' && (
-          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-            Service
-          </span>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {targetPosition && <Handle type="target" position={targetPosition} />}
-        {sourcePosition && <Handle type="source" position={sourcePosition} />}
-        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-          <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
-          <div className="flex justify-between">
-            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Service</span>}
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-pink-500')}>
+          <div
+            className={classNames(
+              'bg-gradient-to-b from-pink-500 to-pink-700 relative flex items-center w-5 justify-center rounded-l-sm text-red-100-500',
+              `border-r-[1px] border-pink-500`
+            )}
+          >
+            <ServerIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+            {mode === 'full' && (
+              <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+                Service
+              </span>
+            )}
           </div>
-        </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-3 py-1">
-              <span className="text-[8px] font-light">{service.data.summary}</span>
+          <div className="p-1 min-w-60 max-w-[min-content]">
+            {targetPosition && <Handle type="target" position={targetPosition} />}
+            {sourcePosition && <Handle type="source" position={sourcePosition} />}
+            <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+              <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
+              <div className="flex justify-between">
+                <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+                {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Service</span>}
+              </div>
             </div>
+            {mode === 'full' && (
+              <div className="divide-y divide-gray-200 ">
+                <div className="leading-3 py-1">
+                  <span className="text-[8px] font-light">{service.data.summary}</span>
+                </div>
 
-            <div className="grid grid-cols-2 gap-x-4 py-1">
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Receives messages: {receives.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Publishes messages: {sends.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Owners: {owners.length}
-              </span>
-            </div>
+                <div className="grid grid-cols-2 gap-x-4 py-1">
+                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                    Receives messages: {receives.length}
+                  </span>
+                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                    Publishes messages: {sends.length}
+                  </span>
+                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                    Owners: {owners.length}
+                  </span>
+                </div>
+              </div>
+            )}
           </div>
-        )}
-      </div>
-    </div>
+        </div>
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+          <ContextMenu.Item
+            asChild
+            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+          >
+            <a href={buildUrl(`/docs/services/${id}/${version}`)}>Read documentation</a>
+          </ContextMenu.Item>
+          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
+          {asyncApiPath && (
+            <ContextMenu.Item asChild>
+              <a
+                href={buildUrl(`/docs/services/${id}/${version}/asyncapi`)}
+                className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View AsyncAPI specification
+              </a>
+            </ContextMenu.Item>
+          )}
+          {openApiPath && (
+            <ContextMenu.Item asChild>
+              <a
+                href={buildUrl(`/docs/services/${id}/${version}/spec`)}
+                className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View OpenAPI specification
+              </a>
+            </ContextMenu.Item>
+          )}
+          {asyncApiPath && openApiPath && <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />}
+          {repositoryUrl && (
+            <>
+              <ContextMenu.Item asChild>
+                <a
+                  href={repositoryUrl}
+                  className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View code repository
+                </a>
+              </ContextMenu.Item>
+              <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
+            </>
+          )}
+          <ContextMenu.Item asChild>
+            <a
+              href={buildUrl(`/docs/services/${id}/${version}/changelog`)}
+              className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Read changelog
+            </a>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
   );
 }

package/eventcatalog/src/components/SideNav/TreeView/getTreeView.ts

@@ -138,7 +138,7 @@ function groupChildrenByType(parentNode: TreeNode) {
 const treeViewCache = new Map<string, TreeNode>();
 
 export function getTreeView({ projectDir, currentPath }: { projectDir: string; currentPath: string }): TreeNode {
-  const basePathname = currentPath.split('/')[1] as 'docs' | 'visualiser';
+  const basePathname = currentPath.split('/').find((p) => p === 'docs' || p === 'visualiser') || 'docs';
 
   const cacheKey = `${projectDir}:${basePathname}`;
   if (treeViewCache.has(cacheKey)) return treeViewCache.get(cacheKey)!;

package/eventcatalog/src/enterprise/ai-assistant/components/ChatSidebar.tsx

@@ -4,15 +4,7 @@ import { useChat } from './hooks/ChatProvider';
 import * as Dialog from '@radix-ui/react-dialog';
 
 const Sidebar: React.FC<{}> = () => {
-  const {
-    sessions = [],
-    currentSession,
-    createSession,
-    deleteSession,
-    addMessageToSession,
-    setCurrentSession,
-    isStreaming,
-  } = useChat();
+  const { sessions = [], currentSession, createSession, deleteSession, setCurrentSession, isStreaming } = useChat();
   const [showHelp, setShowHelp] = React.useState(false);
 
   useEffect(() => {