@eventcatalog/core 2.3.4 → 2.5.0

package/src/components/Tables/columns/FlowTableColumns.tsx

@@ -0,0 +1,82 @@
+import { ServerIcon } from '@heroicons/react/20/solid';
+import { RectangleGroupIcon } from '@heroicons/react/20/solid';
+import { createColumnHelper } from '@tanstack/react-table';
+import type { CollectionEntry } from 'astro:content';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
+import { QueueListIcon } from '@heroicons/react/24/solid';
+
+const columnHelper = createColumnHelper<CollectionEntry<'flows'>>();
+
+export const columns = () => [
+  columnHelper.accessor('data.name', {
+    id: 'name',
+    header: () => <span>Flow</span>,
+    cell: (info) => {
+      const flowRaw = info.row.original;
+      const color = 'teal';
+      return (
+        <div className=" group ">
+          <a
+            href={buildUrl(`/docs/${flowRaw.collection}/${flowRaw.data.id}/${flowRaw.data.version}`)}
+            className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
+          >
+            <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
+              <span className="flex items-center">
+                <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
+                  <QueueListIcon className="h-4 w-4 text-white" />
+                </span>
+                <span className="leading-none px-2 group-hover:underline group-hover:text-purple-500 font-light">
+                  {flowRaw.data.name} (v{flowRaw.data.version})
+                </span>
+              </span>
+            </div>
+          </a>
+        </div>
+      );
+    },
+    footer: (info) => info.column.id,
+    meta: {
+      filterVariant: 'name',
+    },
+    filterFn: filterByName,
+  }),
+  columnHelper.accessor('data.version', {
+    header: () => <span>Version</span>,
+    cell: (info) => {
+      const service = info.row.original;
+      return (
+        <div className="text-left font-light">{`v${info.getValue()} ${service.data.latestVersion === service.data.version ? '(latest)' : ''}`}</div>
+      );
+    },
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('data.summary', {
+    id: 'summary',
+    header: () => 'Summary',
+    cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
+    footer: (info) => info.column.id,
+    meta: {
+      showFilter: false,
+      className: 'max-w-md',
+    },
+  }),
+  columnHelper.accessor('data.name', {
+    header: () => <span />,
+    cell: (info) => {
+      const domain = info.row.original;
+      return (
+        <a
+          className="hover:text-purple-500 hover:underline px-4 font-light"
+          href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
+        >
+          Visualiser &rarr;
+        </a>
+      );
+    },
+    id: 'actions',
+    meta: {
+      showFilter: false,
+    },
+  }),
+];

package/src/components/Tables/columns/index.tsx

@@ -1,6 +1,7 @@
 import { columns as MessageTableColumns } from './MessageTableColumns';
 import { columns as ServiceTableColumns } from './ServiceTableColumns';
 import { columns as DomainTableColumns } from './DomainTableColumns';
+import { columns as FlowTableColumns } from './FlowTableColumns';
 
 export const getColumnsByCollection = (collection: string): any => {
   switch (collection) {
@@ -11,6 +12,8 @@ export const getColumnsByCollection = (collection: string): any => {
       return ServiceTableColumns();
     case 'domains':
       return DomainTableColumns();
+    case 'flows':
+      return FlowTableColumns();
     default:
       return [];
   }

package/src/content/config.ts

@@ -13,6 +13,11 @@ const pages = defineCollection({
   }),
 });
 
+const pointer = z.object({
+  id: z.string(),
+  version: z.string().optional().default('latest'),
+});
+
 const changelogs = defineCollection({
   type: 'content',
   schema: z.object({
@@ -58,6 +63,63 @@ const baseSchema = z.object({
     .optional(),
 });
 
+const flowStep = z
+  .union([
+    // Can be a string or a number just to reference a step
+    z.union([z.string(), z.number()]),
+    z
+      .object({
+        id: z.union([z.string(), z.number()]),
+        label: z.string().optional(),
+      })
+      .optional(),
+  ])
+  .optional();
+
+const flows = defineCollection({
+  type: 'content',
+  schema: z
+    .object({
+      steps: z.array(
+        z
+          .object({
+            id: z.union([z.string(), z.number()]),
+            type: z.enum(['node', 'message', 'user', 'actor']).optional(),
+            title: z.string(),
+            summary: z.string().optional(),
+            message: pointer.optional(),
+            service: pointer.optional(),
+            actor: z
+              .object({
+                name: z.string(),
+              })
+              .optional(),
+            externalSystem: z
+              .object({
+                name: z.string(),
+                summary: z.string().optional(),
+                url: z.string().url().optional(),
+              })
+              .optional(),
+            next_step: flowStep,
+            next_steps: z.array(flowStep).optional(),
+          })
+          .refine((data) => {
+            if (!data.message && !data.service && !data.actor) return true;
+            // Cant have both next_steps and next_steps
+            if (data.next_step && data.next_steps) return false;
+            // Either message or service or actor must be present, but not all
+            return (
+              (data.message && !data.service && !data.actor) ||
+              (!data.message && data.service) ||
+              (data.actor && !data.message && !data.service)
+            );
+          })
+      ),
+    })
+    .merge(baseSchema),
+});
+
 const events = defineCollection({
   type: 'content',
   schema: z
@@ -78,11 +140,6 @@ const commands = defineCollection({
     .merge(baseSchema),
 });
 
-const pointer = z.object({
-  id: z.string(),
-  version: z.string(),
-});
-
 const services = defineCollection({
   type: 'content',
   schema: z
@@ -112,6 +169,7 @@ const users = defineCollection({
     hidden: z.boolean().optional(),
     email: z.string().optional(),
     slackDirectMessageUrl: z.string().optional(),
+    ownedDomains: z.array(reference('domains')).optional(),
     ownedServices: z.array(reference('services')).optional(),
     ownedEvents: z.array(reference('events')).optional(),
     ownedCommands: z.array(reference('commands')).optional(),
@@ -130,6 +188,7 @@ const teams = defineCollection({
     slackDirectMessageUrl: z.string().optional(),
     members: z.array(reference('users')).optional(),
     ownedCommands: z.array(reference('commands')).optional(),
+    ownedDomains: z.array(reference('domains')).optional(),
     ownedServices: z.array(reference('services')).optional(),
     ownedEvents: z.array(reference('events')).optional(),
   }),
@@ -142,6 +201,7 @@ export const collections = {
   users,
   teams,
   domains,
+  flows,
   pages,
   changelogs,
 };

package/src/layouts/DiscoverLayout.astro

@@ -1,11 +1,12 @@
 ---
 import { Table } from '@components/Tables/Table';
-import { RectangleGroupIcon } from '@heroicons/react/24/outline';
+import { QueueListIcon, RectangleGroupIcon } from '@heroicons/react/24/outline';
 import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon';
 import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
 import PlainPage from '@layouts/PlainPage.astro';
 import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
+import { getFlows } from '@utils/flows/flows';
 import { getEvents } from '@utils/events';
 import { getServices } from '@utils/services/services';
 import { buildUrl } from '@utils/url-builder';
@@ -14,6 +15,7 @@ const events = await getEvents();
 const commands = await getCommands();
 const services = await getServices();
 const domains = await getDomains();
+const flows = await getFlows();
 
 const { title, subtitle, data, type } = Astro.props;
 const currentPath = Astro.url.pathname;
@@ -51,6 +53,14 @@ const tabs = [
     activeColor: 'yellow',
     enabled: domains.length > 0,
   },
+  {
+    label: `Flows (${flows.length})`,
+    href: buildUrl('/discover/flows'),
+    isActive: currentPath === '/discover/flows',
+    icon: QueueListIcon,
+    activeColor: 'teal',
+    enabled: flows.length > 0,
+  },
 ];
 ---
 

package/src/layouts/VisualiserLayout.astro

@@ -1,29 +1,36 @@
 ---
 import BasicList from '@components/Lists/BasicList';
 import PlainPage from '@layouts/PlainPage.astro';
-import type { CollectionTypes } from '@types';
 import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
+import { getFlows } from '@utils/flows/flows';
 import { getServices } from '@utils/services/services';
 import { buildUrl } from '@utils/url-builder';
-import type { CollectionEntry } from 'astro:content';
 import { ViewTransitions } from 'astro:transitions';
 
-const [services, events, commands, domains] = await Promise.all([getServices(), getEvents(), getCommands(), getDomains()]);
+const [services, events, commands, domains, flows] = await Promise.all([
+  getServices(),
+  getEvents(),
+  getCommands(),
+  getDomains(),
+  getFlows(),
+]);
 
 // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
-const navItems = [...domains, ...services, ...events, ...commands];
+const navItems = [...domains, ...services, ...events, ...commands, ...flows];
 
-const navigation = navItems.reduce((acc, item) => {
-  //  @ts-ignore
-  const group = acc[item.collection] || [];
+const navigation = navItems
+  .filter((item) => item.data.version === item.data.latestVersion)
+  .reduce((acc, item) => {
+    //  @ts-ignore
+    const group = acc[item.collection] || [];
 
-  return {
-    ...acc,
-    [item.collection]: [...group, item],
-  };
-}, {}) as any;
+    return {
+      ...acc,
+      [item.collection]: [...group, item],
+    };
+  }, {}) as any;
 
 const currentPath = Astro.url.pathname;
 const { title, description } = Astro.props;
@@ -53,16 +60,20 @@ const getColor = (collection: string) => {
       >
         {
           Object.keys(navigation).map((key: any) => {
-            const items = navigation[key].map((item: any) => {
-              const isCurrent = currentPath.includes(`${item.collection}/${item.data.id}/${item.data.version}`);
-              return {
-                label: item.data.name,
-                version: item.data.version,
-                color: getColor(item.collection),
-                href: buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`),
-                active: isCurrent,
-              };
-            });
+            const items = navigation[key]
+              .map((item: any) => {
+                const isCurrent = currentPath.includes(`${item.collection}/${item.data.id}/${item.data.version}`);
+                const isLatest = item.data.version === item.data.latestVersion;
+                if (!isLatest) return null;
+                return {
+                  label: item.data.name,
+                  version: item.data.version,
+                  color: getColor(item.collection),
+                  href: buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`),
+                  active: isCurrent,
+                };
+              })
+              .filter((n: any) => n !== null);
             return (
               <BasicList
                 title={`${key} (${navigation[key].length})`}

package/src/pages/discover/[type]/index.astro

@@ -6,12 +6,14 @@ import type { CollectionTypes } from '@types';
 import { getCommands } from '@utils/commands';
 import { getServices } from '@utils/services/services';
 import { getDomains } from '@utils/domains/domains';
+import { getFlows } from '@utils/flows/flows';
 
 export async function getStaticPaths() {
   const events = await getEvents();
   const commands = await getCommands();
   const services = await getServices();
   const domains = await getDomains();
+  const flows = await getFlows();
 
   const buildPage = (type: string, collection: CollectionEntry<CollectionTypes>[]) => {
     return {
@@ -30,6 +32,7 @@ export async function getStaticPaths() {
     buildPage('commands', commands),
     buildPage('services', services),
     buildPage('domains', domains),
+    buildPage('flows', flows),
   ];
 }
 

package/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -13,18 +13,20 @@ import MessageSideBar from '@components/SideBars/MessageSideBar.astro';
 import { getEvents } from '@utils/events';
 import { getServices } from '@utils/services/services';
 import { getCommands } from '@utils/commands';
-import { EnvelopeIcon, PencilIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
+import { EnvelopeIcon, PencilIcon, QueueListIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
 import { getDomains } from '@utils/domains/domains';
 import DomainSideBar from '@components/SideBars/DomainSideBar.astro';
 import type { CollectionTypes } from '@types';
 import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
 import { buildUrl } from '@utils/url-builder';
+import { getFlows } from '@utils/flows/flows';
 
 export async function getStaticPaths() {
   const events = await getEvents();
   const commands = await getCommands();
   const services = await getServices();
   const domains = await getDomains();
+  const flows = await getFlows();
 
   const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
     return collection.map((item) => ({
@@ -40,7 +42,7 @@ export async function getStaticPaths() {
     }));
   };
 
-  return [...buildPages(domains), ...buildPages(events), ...buildPages(services), ...buildPages(commands)];
+  return [...buildPages(domains), ...buildPages(events), ...buildPages(services), ...buildPages(commands), ...buildPages(flows)];
 }
 
 const props = Astro.props;
@@ -70,6 +72,12 @@ const getBadge = () => {
       class: 'text-yellow-400',
     };
   }
+
+  if (props.collection === 'flows') {
+    return { backgroundColor: 'teal', textColor: 'teal', content: 'Flow', icon: QueueListIcon, class: 'text-gray' };
+  }
+
+  return { backgroundColor: 'teal', textColor: 'teal', content: '', icon: QueueListIcon, class: 'text-gray' };
 };
 
 const badges = [getBadge(), ...contentBadges];

package/src/pages/docs/teams/[id]/index.astro

@@ -34,6 +34,7 @@ const { Content } = await render();
 const membersRaw = props.data.members || [];
 const members = await Promise.all(membersRaw.map((m) => getEntry(m)));
 
+const domains = props.data.ownedDomains as CollectionEntry<'domains'>[];
 const services = props.data.ownedServices as CollectionEntry<'services'>[];
 const events = props.data.ownedEvents as CollectionEntry<'events'>[];
 const commands = props.data.ownedCommands as CollectionEntry<'commands'>[];
@@ -46,6 +47,12 @@ const membersList = members.map((o) => ({
   href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
+const ownedDomainsList = domains.map((p) => ({
+  label: `${p.data.name}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  tag: `v${p.data.version}`,
+}));
+
 const ownedServicesList = services.map((p) => ({
   label: `${p.data.name} (service)`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
@@ -112,6 +119,13 @@ const ownedEventsList = [...events, ...commands].map((p) => ({
     </main>
     <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
       <div class="divide-y-2 divide-gray-100">
+        <PillList
+          color="pink"
+          title={`Owned domains (${ownedDomainsList.length})`}
+          pills={ownedDomainsList}
+          emptyMessage={`${props.data.name} does not own any domains.`}
+          client:load
+        />
         <PillList
           color="blue"
           title={`Owned services (${ownedServicesList.length})`}

package/src/pages/docs/users/[id]/index.astro

@@ -29,11 +29,18 @@ const { render, ...props } = Astro.props;
 
 const { Content } = await render();
 
+const domains = props.data.ownedDomains as CollectionEntry<'domains'>[];
 const services = props.data.ownedServices as CollectionEntry<'services'>[];
 const events = props.data.ownedEvents as CollectionEntry<'events'>[];
 const commands = props.data.ownedCommands as CollectionEntry<'commands'>[];
 const teams = props.data.associatedTeams as CollectionEntry<'teams'>[];
 
+const ownedDomainsList = domains.map((p) => ({
+  label: `${p.data.name}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  tag: `v${p.data.version}`,
+}));
+
 const ownedServicesList = services.map((p) => ({
   label: `${p.data.name} (service)`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
@@ -41,7 +48,8 @@ const ownedServicesList = services.map((p) => ({
 }));
 
 const ownedMessageList = [...events, ...commands].map((p) => ({
-  label: `${p.data.name} (${p.collection.slice(0, -1)})`,
+  label: `${p.data.name}`,
+  badge: p.collection,
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
@@ -91,7 +99,11 @@ const associatedTeams = teams.map((o) => ({
       <div class="border-b border-gray-200">
         <div class="mx-auto max-w-7xl px-6 lg:px-8">
           <div class="mx-auto max-w-2xl lg:max-w-none">
-            <dl class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-3 lg:grid-cols-3">
+            <dl class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-4 lg:grid-cols-4">
+              <div class="flex flex-col p-8">
+                <dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
+                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedDomainsList.length}</dd>
+              </div>
               <div class="flex flex-col p-8">
                 <dt class="text-sm font-semibold leading-6 text-gray-600"># owned services</dt>
                 <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedServicesList.length}</dd>
@@ -118,18 +130,25 @@ const associatedTeams = teams.map((o) => ({
     </main>
     <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
       <div class="divide-y-2 divide-gray-100">
+        <PillList
+          color="pink"
+          title={`Owned domains (${ownedDomainsList.length})`}
+          pills={ownedDomainsList}
+          emptyMessage={`${props.data.name} does not own any domains.`}
+          client:load
+        />
         <PillList
           color="pink"
           title={`Owned services (${ownedServicesList.length})`}
           pills={ownedServicesList}
-          emptyMessage={`${props.data.name} does not own any services .`}
+          emptyMessage={`${props.data.name} does not own any services.`}
           client:load
         />
         <PillList
           color="orange"
           title={`Owned messages (${ownedMessageList.length})`}
           pills={ownedMessageList}
-          emptyMessage={`${props.data.name} does not own any messages .`}
+          emptyMessage={`${props.data.name} does not own any messages.`}
           client:load
         />
         <OwnersList

package/src/pages/visualiser/[type]/[id]/[version]/index.astro

@@ -5,12 +5,19 @@ import type { CollectionTypes } from '@types';
 import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
+import { getFlows } from '@utils/flows/flows';
 import { getServices } from '@utils/services/services';
 import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 
 export async function getStaticPaths() {
-  const [services, events, commands, domains] = await Promise.all([getServices(), getEvents(), getCommands(), getDomains()]);
+  const [services, events, commands, domains, flows] = await Promise.all([
+    getServices(),
+    getEvents(),
+    getCommands(),
+    getDomains(),
+    getFlows(),
+  ]);
 
   const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
     return collection.map((item) => ({
@@ -26,7 +33,7 @@ export async function getStaticPaths() {
     }));
   };
 
-  return [...buildPages(services), ...buildPages(events), ...buildPages(commands), ...buildPages(domains)];
+  return [...buildPages(services), ...buildPages(events), ...buildPages(commands), ...buildPages(domains), ...buildPages(flows)];
 }
 
 const props = Astro.props;

package/src/types/index.ts

@@ -1,2 +1,2 @@
-export type CollectionTypes = 'commands' | 'events' | 'domains' | 'services';
+export type CollectionTypes = 'commands' | 'events' | 'domains' | 'services' | 'flows';
 export type CollectionMessageTypes = 'commands' | 'events';

package/src/utils/collections/util.ts

@@ -1,5 +1,6 @@
 import type { CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
+import { satisfies, validRange } from 'semver';
 
 export const getVersions = (data: CollectionEntry<CollectionTypes>[]) => {
   const allVersions = data.map((item) => item.data.version).sort();
@@ -20,3 +21,24 @@ export const getVersionForCollectionItem = (
   const latestVersion = versions[0];
   return { versions, latestVersion };
 };
+
+export const getItemsFromCollectionByIdAndSemverOrLatest = <T extends { data: { id: string; version: string } }>(
+  collection: T[],
+  id: string,
+  version?: string
+): T[] => {
+  const semverRange = validRange(version);
+  const filteredCollection = collection.filter((c) => c.data.id == id);
+
+  if (semverRange) {
+    return filteredCollection.filter((c) => satisfies(c.data.version, semverRange));
+  }
+
+  // Order by version
+  const sorted = filteredCollection.sort((a, b) => {
+    return a.data.version.localeCompare(b.data.version);
+  });
+
+  // latest version
+  return sorted.length > 0 ? [sorted[sorted.length - 1]] : [];
+};

package/src/utils/commands/node-graph.ts

@@ -2,6 +2,7 @@ import { getCommands } from '@utils/commands';
 import { calculatedNodes, createDagreGraph, generateIdForNode, generatedIdForEdge } from '@utils/node-graph-utils/utils';
 import { type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
+import { MarkerType } from 'reactflow';
 
 type DagreGraph = any;
 
@@ -50,7 +51,12 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
         label: 'invokes',
         animated: false,
         markerEnd: {
-          type: 'arrow',
+          type: MarkerType.ArrowClosed,
+          width: 40,
+          height: 40,
+        },
+        style: {
+          strokeWidth: 1,
         },
       });
     });
@@ -84,7 +90,12 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       label: 'accepts',
       animated: false,
       markerEnd: {
-        type: 'arrow',
+        type: MarkerType.ArrowClosed,
+        width: 40,
+        height: 40,
+      },
+      style: {
+        strokeWidth: 1,
       },
     });
   });

package/src/utils/commands.ts

@@ -2,6 +2,7 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 import { getVersionForCollectionItem } from './collections/util';
+import { satisfies } from 'semver';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
@@ -29,16 +30,16 @@ export const getCommands = async ({ getAllVersions = true }: Props = {}): Promis
     const producers = services.filter((service) => {
       if (!service.data.sends) return false;
       return service.data.sends.find((item) => {
-        if (item.version) return item.id === command.data.id && item.version === command.data.version;
-        return item.id == command.data.id;
+        if (item.version) return item.id === command.data.id && satisfies(command.data.version, item.version);
+        return item.id == command.data.id; // ??
       });
     });
 
     const consumers = services.filter((service) => {
       if (!service.data.receives) return false;
       return service.data.receives.find((item) => {
-        if (item.version) return item.id === command.data.id && item.version === command.data.version;
-        return item.id == command.data.id;
+        if (item.version) return item.id === command.data.id && satisfies(command.data.version, item.version);
+        return item.id == command.data.id; // ??
       });
     });
 

package/src/utils/config/catalog.ts

@@ -9,6 +9,7 @@ export type CatalogConfig = {
     sidebar: {
       showPageHeadings?: boolean;
       domains?: SideBarItemConfig;
+      flows?: SideBarItemConfig;
       services?: SideBarItemConfig;
       messages?: SideBarItemConfig;
       teams?: SideBarItemConfig;

package/src/utils/domains/domains.ts

@@ -1,4 +1,4 @@
-import { getVersionForCollectionItem, getVersions } from '@utils/collections/util';
+import { getItemsFromCollectionByIdAndSemverOrLatest, getVersionForCollectionItem } from '@utils/collections/util';
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
@@ -28,10 +28,8 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
     const servicesInDomain = domain.data.services || [];
 
     const services = servicesInDomain
-      .map((_service) => {
-        return servicesCollection.find((service) => _service.id === service.data.id);
-      })
-      .filter((e) => e !== undefined);
+      .map((_service) => getItemsFromCollectionByIdAndSemverOrLatest(servicesCollection, _service.id, _service.version))
+      .flat();
 
     return {
       ...domain,