@eventcatalog/core 2.65.0 → 3.0.0-beta.0

package/eventcatalog/src/components/SideNav/NestedSideBar/sidebar-builder.ts

@@ -0,0 +1,365 @@
+import { getContainers } from '@utils/collections/containers';
+import { getDomains } from '@utils/collections/domains';
+import { getServices } from '@utils/collections/services';
+import { getMessages, pluralizeMessageType } from '@utils/collections/messages';
+import { getOwner } from '@utils/collections/owners';
+import { getFlows } from '@utils/collections/flows';
+import { getUsers } from '@utils/collections/users';
+import { getTeams } from '@utils/collections/teams';
+import { buildUrl } from '@utils/url-builder';
+import type { NavigationData, NavNode, ChildRef } from './builders/shared';
+import { buildDomainNode } from './builders/domain';
+import { buildServiceNode } from './builders/service';
+import { buildMessageNode } from './builders/message';
+import { buildContainerNode } from './builders/container';
+import { buildFlowNode } from './builders/flow';
+import config from '@config';
+import { getDesigns } from '@utils/collections/designs';
+
+export type { NavigationData, NavNode, ChildRef };
+
+const CACHE_ENABLED = process.env.DISABLE_EVENTCATALOG_CACHE !== 'true';
+let memoryCache: NavigationData | null = null;
+
+/**
+ * Get the navigation data for the sidebar
+ */
+export const getNestedSideBarData = async (): Promise<NavigationData> => {
+  if (memoryCache && CACHE_ENABLED) {
+    return memoryCache;
+  }
+
+  const [domains, services, { events, commands, queries }, containers, flows, users, teams, designs] = await Promise.all([
+    getDomains({ getAllVersions: false, includeServicesInSubdomains: false }),
+    getServices({ getAllVersions: false }),
+    getMessages({ getAllVersions: false }),
+    getContainers({ getAllVersions: false }),
+    getFlows({ getAllVersions: false }),
+    getUsers(),
+    getTeams(),
+    getDesigns(),
+  ]);
+
+  // Calculate derived lists to avoid extra fetches
+  const allSubDomainIds = new Set(domains.flatMap((d) => (d.data.domains || []).map((sd: any) => sd.data.id)));
+  const rootDomains = domains.filter((d) => !allSubDomainIds.has(d.data.id));
+
+  const messages = [...events, ...commands, ...queries];
+
+  const context = {
+    services,
+    domains,
+    events,
+    commands,
+    queries,
+    flows,
+    containers,
+  };
+
+  // Process all domains with their owners first (async)
+  const domainsWithOwners = await Promise.all(
+    domains.map(async (domain) => {
+      const ownersInDomain = domain.data.owners || [];
+      const owners = await Promise.all(ownersInDomain.map((owner) => getOwner(owner)));
+      const filteredOwners = owners.filter((o) => o !== undefined) as Array<NonNullable<(typeof owners)[0]>>;
+
+      return {
+        domain,
+        owners: filteredOwners,
+      };
+    })
+  );
+
+  // Services with owners
+  const servicesWithOwners = await Promise.all(
+    services.map(async (service) => {
+      const ownersInService = service.data.owners || [];
+      const owners = await Promise.all(ownersInService.map((owner) => getOwner(owner)));
+      const filteredOwners = owners.filter((o) => o !== undefined) as Array<NonNullable<(typeof owners)[0]>>;
+      return { service, owners: filteredOwners };
+    })
+  );
+
+  // Messages with owners
+  const messagesWithOwners = await Promise.all(
+    messages.map(async (message) => {
+      const ownersInMessage = message.data.owners || [];
+      const owners = await Promise.all(ownersInMessage.map((owner) => getOwner(owner)));
+      const filteredOwners = owners.filter((o) => o !== undefined) as Array<NonNullable<(typeof owners)[0]>>;
+      return { message, owners: filteredOwners };
+    })
+  );
+
+  const containerWithOwners = await Promise.all(
+    containers.map(async (container) => {
+      const ownersInContainer = container.data.owners || [];
+      const owners = await Promise.all(ownersInContainer.map((owner) => getOwner(owner)));
+      const filteredOwners = owners.filter((o) => o !== undefined) as Array<NonNullable<(typeof owners)[0]>>;
+      return { container, owners: filteredOwners };
+    })
+  );
+
+  const flowNodes = flows.reduce(
+    (acc, flow) => {
+      acc[`flow:${flow.data.id}:${flow.data.version}`] = buildFlowNode(flow);
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
+  const domainNodes = domainsWithOwners.reduce(
+    (acc, { domain, owners }) => {
+      acc[`domain:${domain.data.id}:${domain.data.version}`] = buildDomainNode(domain, owners, context);
+      if (domain.data.latestVersion === domain.data.version) {
+        acc[`domain:${domain.data.id}`] = buildDomainNode(domain, owners, context);
+      }
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
+  const serviceNodes = servicesWithOwners.reduce(
+    (acc, { service, owners }) => {
+      acc[`service:${service.data.id}:${service.data.version}`] = buildServiceNode(service, owners, context);
+      if (service.data.latestVersion === service.data.version) {
+        acc[`service:${service.data.id}`] = buildServiceNode(service, owners, context);
+      }
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
+  const messageNodes = messagesWithOwners.reduce(
+    (acc, { message, owners }) => {
+      const type = pluralizeMessageType(message as any);
+
+      acc[`${type}:${message.data.id}:${message.data.version}`] = buildMessageNode(message, owners);
+      if (message.data.latestVersion === message.data.version) {
+        acc[`${type}:${message.data.id}`] = buildMessageNode(message, owners);
+      }
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
+  const containerNodes = containerWithOwners.reduce(
+    (acc, { container, owners }) => {
+      acc[`container:${container.data.id}:${container.data.version}`] = buildContainerNode(container, owners);
+      if (container.data.latestVersion === container.data.version) {
+        acc[`container:${container.data.id}`] = buildContainerNode(container, owners);
+      }
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
+  const designNodes = designs.reduce(
+    (acc, design) => {
+      acc[`design:${design.data.id}`] = {
+        type: 'item',
+        title: design.data.name,
+        badge: 'Design',
+        href: buildUrl(`/visualiser/designs/${design.data.id}`),
+      };
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
+  const userNodes = users.reduce(
+    (acc, user) => {
+      acc[`user:${user.data.id}`] = {
+        type: 'item',
+        title: user.data.name,
+        href: buildUrl(`/docs/users/${user.data.id}`),
+      };
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
+  const teamNodes = teams.reduce(
+    (acc, team) => {
+      acc[`team:${team.data.id}`] = {
+        type: 'item',
+        title: team.data.name,
+        href: buildUrl(`/docs/teams/${team.data.id}`),
+      };
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
+  const rootDomainsNodes: Record<string, NavNode> = {};
+
+  if (rootDomains.length > 0) {
+    rootDomainsNodes['list:top-level-domains'] = {
+      type: 'group',
+      title: 'Domains',
+      icon: 'Boxes',
+      pages: rootDomains.map((domain) => `domain:${domain.data.id}:${domain.data.version}`),
+    };
+  }
+
+  const createLeaf = (items: any[], node: NavNode) => (items.length > 0 ? node : undefined);
+
+  const domainsList = createLeaf(domains, {
+    type: 'item',
+    title: 'Domains',
+    icon: 'Boxes',
+    pages: domains.map((domain) => `domain:${domain.data.id}:${domain.data.version}`),
+  });
+
+  const servicesList = createLeaf(services, {
+    type: 'item',
+    title: 'Services',
+    icon: 'Server',
+    pages: services.map((service) => `service:${service.data.id}:${service.data.version}`),
+  });
+
+  const eventsList = createLeaf(events, {
+    type: 'group',
+    title: 'Events',
+    icon: 'Zap',
+    pages: events.map((event) => `event:${event.data.id}:${event.data.version}`),
+  });
+
+  const commandsList = createLeaf(commands, {
+    type: 'group',
+    title: 'Commands',
+    icon: 'Terminal',
+    pages: commands.map((command) => `command:${command.data.id}:${command.data.version}`),
+  });
+
+  const queriesList = createLeaf(queries, {
+    type: 'group',
+    title: 'Queries',
+    icon: 'Search',
+    pages: queries.map((query) => `query:${query.data.id}:${query.data.version}`),
+  });
+
+  const flowsList = createLeaf(flows, {
+    type: 'item',
+    title: 'Flows',
+    icon: 'Waypoints',
+    pages: flows.map((flow) => `flow:${flow.data.id}:${flow.data.version}`),
+  });
+
+  const containersList = createLeaf(containers, {
+    type: 'item',
+    title: 'Data Stores',
+    icon: 'Database',
+    pages: containers.map((container) => `container:${container.data.id}:${container.data.version}`),
+  });
+
+  const designsList = createLeaf(designs, {
+    type: 'item',
+    title: 'Designs',
+    icon: 'SquareMousePointer',
+    pages: designs.map((design) => `design:${design.data.id}`),
+  });
+
+  const teamsList = createLeaf(teams, {
+    type: 'group',
+    title: 'Teams',
+    icon: 'Users',
+    pages: teams.map((team) => `team:${team.data.id}`),
+  });
+
+  const usersList = createLeaf(users, {
+    type: 'group',
+    title: 'Users',
+    icon: 'User',
+    pages: users.map((user) => `user:${user.data.id}`),
+  });
+
+  const messagesChildren = ['list:events', 'list:commands', 'list:queries'].filter(
+    (key, index) => [eventsList, commandsList, queriesList][index] !== undefined
+  );
+
+  let messagesList;
+  if (messagesChildren.length > 0) {
+    messagesList = {
+      type: 'item',
+      title: 'Messages',
+      icon: 'Mail',
+      pages: messagesChildren,
+    };
+  }
+
+  const peopleChildren = ['list:teams', 'list:users'].filter((key, index) => [teamsList, usersList][index] !== undefined);
+
+  let peopleList;
+  if (peopleChildren.length > 0) {
+    peopleList = {
+      type: 'item',
+      title: 'Teams & Users',
+      icon: 'Users',
+      pages: peopleChildren,
+    };
+  }
+
+  const allChildrenKeys = [
+    'list:domains',
+    'list:services',
+    'list:messages',
+    'list:flows',
+    'list:containers',
+    'list:designs',
+    'list:people',
+  ];
+  const allChildrenNodes = [domainsList, servicesList, messagesList, flowsList, containersList, designsList, peopleList];
+
+  const validAllChildren = allChildrenKeys.filter((_, idx) => allChildrenNodes[idx] !== undefined);
+
+  let allList;
+  if (validAllChildren.length > 0) {
+    allList = {
+      type: 'group',
+      title: 'Browse',
+      icon: 'Telescope',
+      pages: validAllChildren,
+    };
+  }
+
+  const allNodes: Record<string, NavNode> = {
+    ...(domainsList ? { 'list:domains': domainsList } : {}),
+    ...(servicesList ? { 'list:services': servicesList } : {}),
+    ...(eventsList ? { 'list:events': eventsList } : {}),
+    ...(commandsList ? { 'list:commands': commandsList } : {}),
+    ...(queriesList ? { 'list:queries': queriesList } : {}),
+    ...(messagesList ? { 'list:messages': messagesList as NavNode } : {}),
+    ...(flowsList ? { 'list:flows': flowsList } : {}),
+    ...(containersList ? { 'list:containers': containersList } : {}),
+    ...(designsList ? { 'list:designs': designsList } : {}),
+    ...(teamsList ? { 'list:teams': teamsList } : {}),
+    ...(usersList ? { 'list:users': usersList } : {}),
+    ...(peopleList ? { 'list:people': peopleList as NavNode } : {}),
+    ...(allList ? { 'list:all': allList as NavNode } : {}),
+  };
+
+  const allGeneratedNodes = {
+    ...rootDomainsNodes,
+    ...domainNodes,
+    ...serviceNodes,
+    ...messageNodes,
+    ...containerNodes,
+    ...flowNodes,
+    ...userNodes,
+    ...teamNodes,
+    ...designNodes,
+    ...allNodes,
+  };
+
+  // only filter if child is string
+  const rootNavigationConfig = config?.navigation?.pages || ['list:top-level-domains', 'list:all'];
+
+  const navigationConfig = {
+    roots: rootNavigationConfig,
+    nodes: allGeneratedNodes,
+  };
+
+  memoryCache = navigationConfig;
+
+  return navigationConfig;
+};

package/eventcatalog/src/components/SideNav/NestedSideBar/storage.ts

@@ -0,0 +1,90 @@
+// ============================================
+// Local Storage Persistence
+// ============================================
+
+const STORAGE_KEY = 'eventcatalog-sidebar-nav';
+const COLLAPSED_SECTIONS_KEY = 'eventcatalog-sidebar-collapsed';
+const FAVORITES_KEY = 'eventcatalog-sidebar-favorites';
+
+// ============================================
+// Types
+// ============================================
+
+export type PersistedState = {
+  path: string[]; // Array of node keys representing drill-down path
+  currentUrl: string; // The URL when this state was saved
+};
+
+export type FavoriteItem = {
+  nodeKey: string; // The key of the favorited node
+  path: string[]; // Path of keys to reach this node
+  title: string; // Display title
+  badge?: string; // Type badge (Domain, Service, etc.)
+  href?: string; // Direct link if it's a leaf item
+};
+
+// ============================================
+// Navigation State
+// ============================================
+
+export const saveState = (state: PersistedState): void => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch (e) {
+    console.warn('Failed to save sidebar state:', e);
+  }
+};
+
+export const loadState = (): PersistedState | null => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : null;
+  } catch (e) {
+    console.warn('Failed to load sidebar state:', e);
+    return null;
+  }
+};
+
+// ============================================
+// Collapsed Sections
+// ============================================
+
+export const saveCollapsedSections = (sections: Set<string>): void => {
+  try {
+    localStorage.setItem(COLLAPSED_SECTIONS_KEY, JSON.stringify([...sections]));
+  } catch (e) {
+    console.warn('Failed to save collapsed sections:', e);
+  }
+};
+
+export const loadCollapsedSections = (): Set<string> => {
+  try {
+    const stored = localStorage.getItem(COLLAPSED_SECTIONS_KEY);
+    return stored ? new Set(JSON.parse(stored)) : new Set();
+  } catch (e) {
+    console.warn('Failed to load collapsed sections:', e);
+    return new Set();
+  }
+};
+
+// ============================================
+// Favorites
+// ============================================
+
+export const saveFavorites = (favorites: FavoriteItem[]): void => {
+  try {
+    localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
+  } catch (e) {
+    console.warn('Failed to save favorites:', e);
+  }
+};
+
+export const loadFavorites = (): FavoriteItem[] => {
+  try {
+    const stored = localStorage.getItem(FAVORITES_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch (e) {
+    console.warn('Failed to load favorites:', e);
+    return [];
+  }
+};

package/eventcatalog/src/components/SideNav/SideNav.astro

@@ -1,37 +1,27 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
-import config from '@config';
-
-// FlatView
-import { getResourcesForNavigation as getListViewResources } from './ListViewSideBar/utils';
-
-// TreeView
-import { SideNavTreeView } from './TreeView';
-import { getTreeView } from './TreeView/getTreeView';
-
-import ListViewSideBar from './ListViewSideBar';
 
 interface Props extends Omit<HTMLAttributes<'div'>, 'children'> {}
+import { getNestedSideBarData } from './NestedSideBar/sidebar-builder';
+import NestedSideBar from './NestedSideBar';
+import { ClientRouter } from 'astro:transitions';
 
-const currentPath = Astro.url.pathname;
-
-let props;
-
-const SIDENAV_TYPE = config?.docs?.sidebar?.type ?? 'LIST_VIEW';
-const SHOW_ORPHANED_MESSAGES = config?.docs?.sidebar?.showOrphanedMessages ?? true;
-
-if (SIDENAV_TYPE === 'LIST_VIEW') {
-  props = await getListViewResources({ currentPath });
-} else if (SIDENAV_TYPE === 'TREE_VIEW') {
-  props = getTreeView({ projectDir: process.env.PROJECT_DIR!, currentPath });
-}
+const props = await getNestedSideBarData();
 ---
 
 <div {...Astro.props}>
-  {
-    SIDENAV_TYPE === 'LIST_VIEW' && (
-      <ListViewSideBar resources={props} currentPath={currentPath} client:only showOrphanedMessages={SHOW_ORPHANED_MESSAGES} />
-    )
-  }
-  {SIDENAV_TYPE === 'TREE_VIEW' && <SideNavTreeView client:only transition:persist tree={props} />}
+  <ClientRouter />
+  <NestedSideBar client:only="react" />
 </div>
+
+<script is:inline define:vars={{ props }}>
+  window.sidebarData = props;
+</script>
+
+<script>
+  import { setSidebarData } from '@stores/sidebar-store';
+  const data = (window as any).sidebarData;
+  if (data) {
+    setSidebarData(data);
+  }
+</script>

package/eventcatalog/src/content.config.ts

@@ -390,6 +390,7 @@ const services = defineCollection({
       entities: z.array(pointer).optional(),
       writesTo: z.array(pointer).optional(),
       readsFrom: z.array(pointer).optional(),
+      flows: z.array(pointer).optional(),
       detailsPanel: z
         .object({
           domains: detailPanelPropertySchema.optional(),
@@ -497,6 +498,7 @@ const domains = defineCollection({
       services: z.array(pointer).optional(),
       domains: z.array(pointer).optional(),
       entities: z.array(pointer).optional(),
+      flows: z.array(pointer).optional(),
       detailsPanel: z
         .object({
           parentDomains: detailPanelPropertySchema.optional(),

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -16,6 +16,8 @@ import { getAdjacentPages } from '@enterprise/custom-documentation/utils/custom-
 import CustomDocsNav from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNav.astro';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
 
+import { isVisualiserEnabled } from '@utils/feature';
+
 const props = Astro.props;
 const doc = props.data;
 const { Content, headings } = await render(props as any);
@@ -132,10 +134,14 @@ const badges = doc?.badges || [];
                   title={nodeGraph.title}
                   mode="simple"
                   linksToVisualiser={true}
-                  href={{
-                    label: 'Open in Visualiser',
-                    url: buildUrl(`/visualiser/${collection}/${nodeGraph.id}/${nodeGraph.version}`),
-                  }}
+                  href={
+                    isVisualiserEnabled()
+                      ? {
+                          label: 'Open in Visualiser',
+                          url: buildUrl(`/visualiser/${collection}/${nodeGraph.id}/${nodeGraph.version}`),
+                        }
+                      : undefined
+                  }
                 />
               );
             })

package/eventcatalog/src/enterprise/eventcatalog-chat/pages/chat/index.astro

@@ -5,10 +5,10 @@ import { getChatPromptsGroupedByCategory } from '@enterprise/eventcatalog-chat/u
 import config from '@config';
 import { Code } from 'astro-expressive-code/components';
 import { getDomains } from '@utils/collections/domains';
-import { getEvents } from '@utils/events';
-import { getCommands } from '@utils/commands';
+import { getEvents } from '@utils/collections/events';
+import { getCommands } from '@utils/collections/commands';
 import { getServices } from '@utils/collections/services';
-import { getQueries } from '@utils/queries';
+import { getQueries } from '@utils/collections/queries';
 
 const isEnabled = config.chat?.enabled || false;
 const chatConfig = config.chat || {};

package/eventcatalog/src/layouts/DirectoryLayout.astro

@@ -3,8 +3,8 @@ import { Table, type TData, type TCollectionTypes } from '@components/Tables/Tab
 import { buildUrl } from '@utils/url-builder';
 import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
 import { User, Users } from 'lucide-react';
-import { getUsers } from '@utils/users';
-import { getTeams } from '@utils/teams';
+import { getUsers } from '@utils/collections/users';
+import { getTeams } from '@utils/collections/teams';
 import config from '@config';
 
 const users = await getUsers();

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -2,13 +2,13 @@
 import { Table, type TData, type TCollectionTypes } from '@components/Tables/Table';
 import { QueueListIcon, RectangleGroupIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
-import { getCommands } from '@utils/commands';
+import { getCommands } from '@utils/collections/commands';
 import { getDomains } from '@utils/collections/domains';
 import { getFlows } from '@utils/collections/flows';
-import { getEvents } from '@utils/events';
+import { getEvents } from '@utils/collections/events';
 import { getServices } from '@utils/collections/services';
 import { buildUrl } from '@utils/url-builder';
-import { getQueries } from '@utils/queries';
+import { getQueries } from '@utils/collections/queries';
 import { getContainers } from '@utils/collections/containers';
 import { DatabaseIcon } from 'lucide-react';
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';