@eventcatalog/core 2.58.1 → 2.59.0

package/eventcatalog/src/components/MDX/NodeGraph/Edges/MultilineEdgeLabel.tsx

@@ -0,0 +1,52 @@
+import { type EdgeProps, getBezierPath } from '@xyflow/react';
+
+export default function MultilineEdgeLabel(props: EdgeProps) {
+  const {
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    label,
+    markerStart, // <-- forward these
+    markerEnd,
+    style,
+    selected,
+  } = props;
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  });
+
+  const lines = String(label ?? '').split('\n');
+
+  return (
+    <>
+      <path
+        id={id}
+        d={edgePath}
+        className={`react-flow__edge-path${selected ? ' selected' : ''}`}
+        markerStart={markerStart}
+        markerEnd={markerEnd}
+        style={style}
+      />
+
+      {/* Optional: bigger hitbox for hover/selection */}
+
+      <text x={labelX} y={labelY} textAnchor="middle" dominantBaseline="middle" fontSize="10px" pointerEvents="none">
+        {lines.map((line, i) => (
+          <tspan key={i} x={labelX} dy={i === 0 ? 0 : '1.2em'} style={{ fontStyle: i === 0 ? 'normal' : 'italic' }}>
+            {line}
+          </tspan>
+        ))}
+      </text>
+    </>
+  );
+}

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -16,6 +16,7 @@ import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs
 import { buildUrl } from '@utils/url-builder';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
+import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
 import config from '@config';
 
 interface Props {
@@ -59,6 +60,7 @@ const getNodesAndEdgesFunctions = {
   queries: getNodesAndEdgesForQueries,
   domains: getNodesAndEdgesForDomain,
   flows: getNodesAndEdgesForFlows,
+  containers: getNodesAndEdgesForContainer,
 };
 
 let links: { label: string; url: string }[] = [];
@@ -121,6 +123,17 @@ if (collection === 'domains-entities') {
   nodes = fetchedNodes;
   edges = fetchedEdges;
 }
+
+if (collection === 'services-containers') {
+  const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesForService({
+    id,
+    version,
+    renderMessages: false,
+    mode: 'full',
+  });
+  nodes = fetchedNodes;
+  edges = fetchedEdges;
+}
 ---
 
 <div>

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

@@ -32,6 +32,7 @@ import CommandNode from './Nodes/Command';
 import ExternalSystemNode from './Nodes/ExternalSystem';
 import DomainNode from './Nodes/Domain';
 import AnimatedMessageEdge from './Edges/AnimatedMessageEdge';
+import MultilineEdgeLabel from './Edges/MultilineEdgeLabel';
 import FlowEdge from './Edges/FlowEdge';
 import CustomNode from './Nodes/Custom';
 import DataNode from './Nodes/Data';
@@ -124,6 +125,7 @@ const NodeGraphBuilder = ({
   const edgeTypes = useMemo(
     () => ({
       animated: AnimatedMessageEdge,
+      multiline: MultilineEdgeLabel,
       'flow-edge': FlowEdge,
     }),
     []
@@ -241,7 +243,7 @@ const NodeGraphBuilder = ({
       eds.map((edge) => ({
         ...edge,
         animated: animateMessages,
-        type: edge.type === 'flow-edge' ? 'flow-edge' : animateMessages ? 'animated' : 'default',
+        type: edge.type === 'flow-edge' || edge.type === 'multiline' ? edge.type : animateMessages ? 'animated' : 'default',
         data: { ...edge.data, animateMessages, animated: animateMessages },
       }))
     );
@@ -423,6 +425,7 @@ const NodeGraphBuilder = ({
       externalSystem: 'bg-pink-600',
       actor: 'bg-yellow-500',
       step: 'bg-gray-700',
+      data: 'bg-blue-600',
     };
 
     let legendForDomains: { [key: string]: { count: number; colorClass: string; groupId: string } } = {};

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

@@ -1,24 +1,63 @@
 import { Handle, Position } from '@xyflow/react';
 
 import { nodeComponents, type DataNode } from '@eventcatalog/visualizer';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { buildUrl } from '@utils/url-builder';
 const DataComponent = nodeComponents.data;
 
-export default function DataNode(props: DataNode) {
+interface Data {
+  data: {
+    data: {
+      id: string;
+      version: string;
+      name: string;
+    };
+  };
+}
+
+export default function DataNode(props: Data) {
+  const { id, version, name } = props.data.data;
+
   return (
-    <div className="relative">
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={{ width: 10, height: 10, background: 'blue', zIndex: 10 }}
-        className="bg-gray-500"
-      />
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{ width: 10, height: 10, background: 'blue', zIndex: 10 }}
-        className="bg-gray-500"
-      />
-      <DataComponent {...props} />
-    </div>
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <div className="relative">
+          <Handle
+            type="target"
+            position={Position.Left}
+            style={{ width: 10, height: 10, background: 'blue', zIndex: 10 }}
+            className="bg-gray-500"
+          />
+          <Handle
+            type="source"
+            position={Position.Right}
+            style={{ width: 10, height: 10, background: 'blue', zIndex: 10 }}
+            className="bg-gray-500"
+          />
+          <DataComponent {...(props as any)} />
+        </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/containers/${id}/${version}`)}>Read documentation</a>
+          </ContextMenu.Item>
+          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
+          <ContextMenu.Item asChild>
+            <a
+              href={buildUrl(`/docs/containers/${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/SideBars/ContainerSideBar.astro

@@ -0,0 +1,180 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import PillListFlat from '@components/Lists/PillListFlat';
+import OwnersList from '@components/Lists/OwnersList';
+import VersionList from '@components/Lists/VersionList.astro';
+import { buildUrl } from '@utils/url-builder';
+import { ScrollText, Workflow, RssIcon } from 'lucide-react';
+import RepositoryList from '@components/Lists/RepositoryList.astro';
+import { getOwner } from '@utils/collections/owners';
+import CustomSideBarSectionList from '@components/Lists/CustomSideBarSectionList.astro';
+import { isChangelogEnabled } from '@utils/feature';
+import config from '@config';
+
+interface Props {
+  container: CollectionEntry<'containers'>;
+}
+
+const { container } = Astro.props;
+
+const servicesThatWriteToContainer = (container.data.servicesThatWriteToContainer as CollectionEntry<'services'>[]) || [];
+const servicesThatReadFromContainer = (container.data.servicesThatReadFromContainer as CollectionEntry<'services'>[]) || [];
+const ownersRaw = container.data?.owners || [];
+
+const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
+const filteredOwners = owners.filter((o) => o !== undefined);
+const resourceGroups = container.data?.resourceGroups || [];
+const attachments = container.data.attachments || [];
+
+const attachmentsList = attachments.map((a) => {
+  const attachmentIsURL = typeof a === 'string';
+  return {
+    label: attachmentIsURL ? a : (a.title ?? a.url),
+    href: attachmentIsURL ? a : a.url,
+    icon: attachmentIsURL ? 'ExternalLinkIcon' : (a.icon ?? 'ExternalLinkIcon'),
+    target: '_blank' as const,
+    subgroup: attachmentIsURL ? undefined : (a.type ?? ''),
+  };
+});
+
+const writesToList = servicesThatWriteToContainer?.map((p) => ({
+  label: p.data.name,
+  tag: `v${p.data.version}`,
+  collection: p.collection,
+  href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
+}));
+
+const readsFromList = servicesThatReadFromContainer?.map((p) => ({
+  label: p.data.name,
+  tag: `v${p.data.version}`,
+  collection: p.collection,
+  href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
+}));
+
+const ownersList = filteredOwners.map((o) => ({
+  label: o.data.name,
+  type: o.collection,
+  badge: o.collection === 'users' ? o.data.role : 'Team',
+  avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
+}));
+
+const shouldRenderSideBarSection = (section: string) => {
+  if (!container.data.detailsPanel) {
+    return true;
+  }
+  // @ts-ignore
+  return container.data.detailsPanel[section]?.visible ?? true;
+};
+
+const isRSSEnabled = config.rss?.enabled;
+---
+
+<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
+  <div class="">
+    {
+      resourceGroups
+        .filter((section) => section.items.length > 0 && section.sidebar)
+        .map((section) => <CustomSideBarSectionList section={section} />)
+    }
+    {
+      writesToList.length > 0 && shouldRenderSideBarSection('services') && (
+        <PillListFlat
+          color="pink"
+          title={`Services (writes) (${writesToList.length})`}
+          pills={writesToList}
+          emptyMessage={'No services are using this resource.'}
+          client:load
+        />
+      )
+    }
+    {
+      readsFromList.length > 0 && shouldRenderSideBarSection('services') && (
+        <PillListFlat
+          color="pink"
+          title={`Services (reads) (${readsFromList.length})`}
+          pills={readsFromList}
+          emptyMessage={'No services are using this resource.'}
+          client:load
+        />
+      )
+    }
+
+    {
+      container.data.versions && shouldRenderSideBarSection('versions') && (
+        <VersionList
+          title={`Versions (${container.data.versions?.length})`}
+          versions={container.data.versions}
+          collectionItem={container}
+        />
+      )
+    }
+
+    {
+      container.data.attachments && shouldRenderSideBarSection('attachments') && (
+        <PillListFlat
+          title={`Attachments (${attachmentsList.length})`}
+          pills={attachmentsList}
+          emptyMessage={`This resource does not have any attachments.`}
+          color="pink"
+          client:load
+        />
+      )
+    }
+
+    {
+      ownersList.length > 0 && shouldRenderSideBarSection('owners') && (
+        <OwnersList
+          title={`Owners (${ownersList.length})`}
+          owners={ownersList}
+          emptyMessage={`This resource does not have any documented owners.`}
+          client:load
+        />
+      )
+    }
+
+    {
+      container.data.repository && shouldRenderSideBarSection('repository') && (
+        <RepositoryList repository={container.data.repository?.url} language={container.data.repository?.language} />
+      )
+    }
+
+    {
+      isRSSEnabled && (
+        <div class="mx-auto pb-8 w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+          <span class="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize">Container RSS Feed</span>
+          <ul role="list" class="space-y-2 mt-2">
+            <li class="has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  ">
+              <a class={`flex items-center space-x-2`} target="_blank" href={buildUrl(`/rss/${container.collection}/rss.xml`)}>
+                <RssIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
+                <span class="font-light text-sm truncate">RSS Feed</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      )
+    }
+
+    <div class="space-y-2">
+      <a
+        href={buildUrl(`/visualiser/${container.collection}/${container.data.id}/${container.data.version}`)}
+        class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
+      >
+        <Workflow strokeWidth={2} size={16} />
+        <span class="block">View in visualiser</span>
+      </a>
+
+      {
+        isChangelogEnabled() && shouldRenderSideBarSection('changelog') && (
+          <a
+            href={buildUrl(`/docs/${container.collection}/${container.data.id}/${container.data.latestVersion}/changelog`)}
+            class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
+          >
+            <ScrollText strokeWidth={2} size={16} />
+            <span class="block">Read changelog</span>
+          </a>
+        )
+      }
+    </div>
+  </div>
+</aside>

package/eventcatalog/src/components/SideBars/ServiceSideBar.astro

@@ -24,6 +24,11 @@ const sends = (service.data.sends as CollectionEntry<'events'>[]) || [];
 // @ts-ignore
 const receives = (service.data.receives as CollectionEntry<'events'>[]) || [];
 
+// @ts-ignore
+const writesTo = (service.data.writesTo as CollectionEntry<'containers'>[]) || [];
+// @ts-ignore
+const readsFrom = (service.data.readsFrom as CollectionEntry<'containers'>[]) || [];
+
 // @ts-ignore
 const entities = (service.data.entities as CollectionEntry<'entities'>[]) || [];
 
@@ -70,6 +75,24 @@ const receivesList = receives
     href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   }));
 
+const writesToList = writesTo.map((p) => ({
+  label: p.data.name,
+  badge: p.collection,
+  color: p.collection === 'containers' ? 'green' : 'blue',
+  collection: p.collection,
+  tag: `v${p.data.version}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+}));
+
+const readsFromList = readsFrom.map((p) => ({
+  label: p.data.name,
+  badge: p.collection,
+  color: p.collection === 'containers' ? 'green' : 'blue',
+  collection: p.collection,
+  tag: `v${p.data.version}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+}));
+
 const ownersList = filteredOwners.map((o) => ({
   label: o.data.name,
   type: o.collection,
@@ -148,6 +171,24 @@ const shouldRenderSideBarSection = (section: string) => {
         </>
       )
     }
+    <>
+      <PillListFlat
+        title={`Writes to (${writesToList.length})`}
+        pills={writesToList}
+        emptyMessage={`This service does not receive any messages.`}
+        color="orange"
+        client:load
+      />
+    </>
+    <>
+      <PillListFlat
+        title={`Reads from (${readsFromList.length})`}
+        pills={readsFromList}
+        emptyMessage={`This service does not read from any containers.`}
+        color="orange"
+        client:load
+      />
+    </>
     {
       service.data.versions && shouldRenderSideBarSection('versions') && (
         <VersionList versions={service.data.versions} collectionItem={service} />

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

@@ -64,7 +64,7 @@ const MessageList: React.FC<MessageListProps> = ({ messages, decodedCurrentPath,
             <span className="text-xs text-gray-400">{message.data.draft ? ' (DRAFT)' : ''}</span>
           </span>
           <span
-            className={`ml-2 text-[10px]  flex items-center gap-1 font-medium px-2 uppercase py-0.5 rounded ${getMessageColorByLabelOrCollection(message.collection, message.data?.sidebar?.badge)}`}
+            className={`ml-2 text-[10px]  flex items-center gap-1 font-medium px-2 uppercase py-0.5 rounded ${getMessageColorByLabelOrCollection(message.collection, message.data?.sidebar?.badge)} ${message.data?.sidebar?.backgroundColor}`}
           >
             {message.data?.sidebar?.badge || getMessageCollectionName(message.collection, message)}
           </span>