@eventcatalog/core 2.30.7 → 2.31.0

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

@@ -38,8 +38,6 @@ function classNames(...classes: any) {
 export default function UserNode({ data, sourcePosition, targetPosition }: any) {
   const { mode, step, custom: customProps } = data as Data;
 
-  console.log('step', customProps);
-
   const {
     color = 'blue',
     title = 'Custom',

package/eventcatalog/src/components/MDX/Steps/Step.astro

@@ -2,7 +2,7 @@
 const { title } = Astro.props;
 ---
 
-<li class="mb-8 ml-6 w-full xl:max-w-[50%] step">
+<li class="mb-8 ml-6 w-full xl:max-w-[90%] step">
   <div class="flex items-center mb-4">
     <span class="step-number absolute flex items-center justify-center w-6 h-6 bg-primary/80 rounded-md -left-3 text-white">
       <div></div>

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

@@ -25,3 +25,18 @@ const data = splitByLi(html);
     {data.map((item: any) => <Fragment set:html={item} />)}
   </ol>
 </div>
+
+<script>
+  function applyStepNumbers() {
+    document.querySelectorAll('li[data-step]').forEach((li) => {
+      const stepNumber = li.getAttribute('data-step');
+      const stepSpan = li.querySelector('.step-number div');
+      if (stepSpan) {
+        stepSpan.textContent = stepNumber;
+      }
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', applyStepNumbers);
+  document.addEventListener('astro:page-load', applyStepNumbers);
+</script>

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

@@ -0,0 +1,75 @@
+---
+import OwnersList from '@components/Lists/OwnersList';
+import VersionList from '@components/Lists/VersionList.astro';
+import { buildUrl } from '@utils/url-builder';
+import { getOwner } from '@utils/collections/owners';
+import type { CollectionEntry } from 'astro:content';
+import { ScrollText, Workflow, RssIcon } from 'lucide-react';
+import config from '@config';
+
+interface Props {
+  flow: CollectionEntry<'flows'>;
+}
+
+const { flow } = Astro.props;
+
+const ownersRaw = flow.data?.owners || [];
+const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
+const filteredOwners = owners.filter((o) => o !== undefined);
+
+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 isRSSEnabled = config.rss?.enabled;
+---
+
+<aside class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
+  <div id="sidebar-cta-portal" class="">
+    {flow.data.versions && <VersionList versions={flow.data.versions} collectionItem={flow} />}
+
+    <OwnersList
+      title={`Flow owners (${ownersList.length})`}
+      owners={ownersList}
+      emptyMessage={`This flow does not have any documented owners.`}
+      client:load
+    />
+
+    {
+      isRSSEnabled && (
+        <div class="mx-auto pb-4 w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5 border-b border-gray-100 mb-4">
+          <span class="text-sm text-black group-data-[hover]:text-black/80 capitalize">Flow 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/flows/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</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      )
+    }
+
+    <div class="space-y-2">
+      <a
+        href={buildUrl(`/visualiser/${flow.collection}/${flow.data.id}/${flow.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>
+      <a
+        href={buildUrl(`/docs/${flow.collection}/${flow.data.id}/${flow.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/SideNav/CustomDocsNav/CustomDocsNavWrapper.tsx

@@ -0,0 +1,11 @@
+import CustomDocsNav from './';
+import type { SidebarSection } from './types';
+
+interface CustomDocsNavWrapperProps {
+  sidebarItems: SidebarSection[];
+  currentPath: string;
+}
+
+export default function CustomDocsNavWrapper(props: CustomDocsNavWrapperProps) {
+  return <CustomDocsNav {...props} />;
+}

package/eventcatalog/src/components/SideNav/CustomDocsNav/components/NestedItem.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import { buildUrl } from '@utils/url-builder';
+import type { SidebarItem } from '../types';
+
+interface NestedItemProps {
+  item: SidebarItem;
+  currentPath: string;
+  parentId: string;
+  itemIndex: number;
+  collapsedGroups: { [key: string]: boolean };
+  toggleGroupCollapse: (group: string) => void;
+}
+
+const NestedItem: React.FC<NestedItemProps> = ({
+  item,
+  currentPath,
+  parentId,
+  itemIndex,
+  collapsedGroups,
+  toggleGroupCollapse,
+}) => {
+  const hasNestedItems = item.items && item.items.length > 0;
+  const itemId = `${parentId}-${itemIndex}`;
+
+  if (hasNestedItems && item.items) {
+    return (
+      <div className="py-1">
+        <div className="flex items-center">
+          <button
+            className="p-1 hover:bg-gray-100 rounded-md"
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleGroupCollapse(`nested-${itemId}`);
+            }}
+          >
+            <div className={`transition-transform duration-150 ${collapsedGroups[`nested-${itemId}`] ? '' : 'rotate-180'}`}>
+              <svg
+                className="h-3 w-3 text-gray-500"
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </div>
+          </button>
+          <button
+            className="flex-grow flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50"
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleGroupCollapse(`nested-${itemId}`);
+            }}
+          >
+            <span className="truncate">{item.label}</span>
+          </button>
+        </div>
+
+        <div
+          className={`overflow-hidden transition-[height] duration-150 ease-out ${
+            collapsedGroups[`nested-${itemId}`] ? 'h-0' : 'h-auto'
+          }`}
+        >
+          <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
+            {item.items.map((nestedItem: SidebarItem, nestedIndex: number) => {
+              if (nestedItem.items && nestedItem.items.length > 0) {
+                // Recursively render deeper nested items
+                const nestedItemId = `${itemId}-${nestedIndex}`;
+                return (
+                  <div className="py-1" key={`nested-${nestedItemId}`}>
+                    <div className="flex items-center">
+                      <button
+                        className="p-1 hover:bg-gray-100 rounded-md"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleGroupCollapse(`nested-${nestedItemId}`);
+                        }}
+                      >
+                        <div
+                          className={`transition-transform duration-150 ${collapsedGroups[`nested-${nestedItemId}`] ? '' : 'rotate-180'}`}
+                        >
+                          <svg
+                            className="h-3 w-3 text-gray-500"
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          >
+                            <polyline points="6 9 12 15 18 9" />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        className="flex-grow flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleGroupCollapse(`nested-${nestedItemId}`);
+                        }}
+                      >
+                        <span className="truncate">{nestedItem.label}</span>
+                      </button>
+                    </div>
+
+                    <div
+                      className={`overflow-hidden transition-[height] duration-150 ease-out ${
+                        collapsedGroups[`nested-${nestedItemId}`] ? 'h-0' : 'h-auto'
+                      }`}
+                    >
+                      <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
+                        {nestedItem.items.map((deepNestedItem: SidebarItem, deepIndex: number) => {
+                          const deepNestedItemPath = deepNestedItem.slug ? buildUrl(`/docs/custom/${deepNestedItem.slug}`) : '#';
+                          const isDeepActive =
+                            currentPath === deepNestedItemPath || currentPath.endsWith(`/${deepNestedItem.slug}`);
+
+                          return (
+                            <a
+                              key={`deep-${nestedItemId}-${deepIndex}`}
+                              href={deepNestedItemPath}
+                              className={`flex items-center px-2 py-1.5 text-xs ${isDeepActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
+                              data-active={isDeepActive}
+                            >
+                              <span className="truncate">{deepNestedItem.label}</span>
+                            </a>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                );
+              }
+
+              const nestedItemPath = nestedItem.slug ? buildUrl(`/docs/custom/${nestedItem.slug}`) : '#';
+              const isActive = currentPath === nestedItemPath || currentPath.endsWith(`/${nestedItem.slug}`);
+
+              return (
+                <a
+                  key={`nested-link-${itemId}-${nestedIndex}`}
+                  href={nestedItemPath}
+                  className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
+                  data-active={isActive}
+                >
+                  <span className="truncate">{nestedItem.label}</span>
+                </a>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const itemPath = item.slug ? buildUrl(`/docs/custom/${item.slug}`) : '#';
+  const isActive = currentPath === itemPath || currentPath.endsWith(`/${item.slug}`);
+
+  return (
+    <a
+      href={itemPath}
+      className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
+      data-active={isActive}
+    >
+      <span className="truncate">{item.label}</span>
+      {item.badge && item?.badge?.text && (
+        <span
+          className={`text-${item.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${item.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
+        >
+          {item.badge.text}
+        </span>
+      )}
+    </a>
+  );
+};
+
+export default React.memo(NestedItem);

package/eventcatalog/src/components/SideNav/CustomDocsNav/components/NoResultsFound.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface NoResultsFoundProps {
+  searchTerm: string;
+}
+
+const NoResultsFound: React.FC<NoResultsFoundProps> = ({ searchTerm }) => (
+  <div className="px-4 py-6 text-center">
+    <div className="text-gray-400 text-sm mb-2">No results found for "{searchTerm}"</div>
+    <div className="text-gray-400 text-xs">
+      Try:
+      <ul className="mt-2 space-y-1 text-left list-disc pl-4">
+        <li>Checking for typos</li>
+        <li>Using fewer keywords</li>
+        <li>Using more general terms</li>
+      </ul>
+    </div>
+  </div>
+);
+
+export default React.memo(NoResultsFound);

package/eventcatalog/src/components/SideNav/CustomDocsNav/index.tsx

@@ -0,0 +1,250 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { buildUrl } from '@utils/url-builder';
+import type { CustomDocsNavProps, SidebarSection, SidebarItem } from './types';
+import NestedItem from './components/NestedItem';
+import NoResultsFound from './components/NoResultsFound';
+
+const STORAGE_KEY = 'EventCatalog:customDocsSidebarCollapsedGroups';
+const DEBOUNCE_DELAY = 300; // 300ms debounce delay
+
+const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems, currentPath }) => {
+  const navRef = useRef<HTMLElement>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>(() => {
+    if (typeof window !== 'undefined') {
+      const saved = window.localStorage.getItem(STORAGE_KEY);
+      setIsInitialized(true);
+      return saved ? JSON.parse(saved) : {};
+    }
+    return {};
+  });
+
+  // Set up debounced search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm.toLowerCase());
+    }, DEBOUNCE_DELAY);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  // Filter sidebar items based on search term
+  const filteredSidebarItems = useMemo(() => {
+    if (!debouncedSearchTerm) return sidebarItems;
+
+    const matchesSearchTerm = (text: string) => text.toLowerCase().includes(debouncedSearchTerm);
+
+    // Helper function to check if an item or any of its nested items match the search term
+    const itemContainsSearchTerm = (item: SidebarItem): boolean => {
+      if (matchesSearchTerm(item.label)) return true;
+
+      if (item.items && item.items.length > 0) {
+        return item.items.some(itemContainsSearchTerm);
+      }
+
+      return false;
+    };
+
+    return sidebarItems
+      .map((section) => {
+        if (!section.items) {
+          return matchesSearchTerm(section.label) ? section : null;
+        }
+
+        const filteredItems = section.items.filter(itemContainsSearchTerm);
+
+        if (filteredItems.length > 0 || matchesSearchTerm(section.label)) {
+          return {
+            ...section,
+            items: filteredItems,
+          };
+        }
+
+        return null;
+      })
+      .filter(Boolean) as SidebarSection[];
+  }, [sidebarItems, debouncedSearchTerm]);
+
+  // Auto-expand groups when searching
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      // Expand all groups when searching
+      const newCollapsedState = { ...collapsedGroups };
+      Object.keys(newCollapsedState).forEach((key) => {
+        newCollapsedState[key] = false;
+      });
+      setCollapsedGroups(newCollapsedState);
+    }
+  }, [debouncedSearchTerm]);
+
+  // Store collapsed groups in local storage
+  useEffect(() => {
+    if (typeof window !== 'undefined' && isInitialized) {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsedGroups));
+    }
+  }, [collapsedGroups, isInitialized]);
+
+  // Initialize collapsed state from section config
+  useEffect(() => {
+    if (isInitialized && sidebarItems && sidebarItems.length > 0) {
+      const initialState = { ...collapsedGroups };
+
+      sidebarItems.forEach((section, index) => {
+        const sectionKey = `section-${index}`;
+        if (section.collapsed !== undefined && initialState[sectionKey] === undefined) {
+          initialState[sectionKey] = section.collapsed;
+        }
+      });
+
+      setCollapsedGroups(initialState);
+    }
+  }, [sidebarItems, isInitialized]);
+
+  // If we find a data-active element, scroll to it on mount
+  useEffect(() => {
+    const activeElement = document.querySelector('[data-active="true"]');
+    if (activeElement) {
+      // Add y offset to the scroll position
+      setTimeout(() => {
+        activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }, 300);
+    }
+  }, []);
+
+  const toggleGroupCollapse = useCallback((group: string) => {
+    setCollapsedGroups((prev) => ({
+      ...prev,
+      [group]: !prev[group],
+    }));
+  }, []);
+
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  }, []);
+
+  if (!isInitialized) return null;
+
+  const hasNoResults = debouncedSearchTerm && filteredSidebarItems.length === 0;
+
+  return (
+    <nav ref={navRef} className="h-full text-gray-800 pt-2">
+      <div className="mb-2 px-4">
+        <input
+          type="text"
+          value={searchTerm}
+          onChange={handleSearchChange}
+          placeholder="Quick search..."
+          className="w-full p-2 text-sm rounded-md border border-gray-200 h-[30px]"
+        />
+      </div>
+
+      <div className="space-y-2 divide-y divide-gray-100/40">
+        {hasNoResults ? (
+          <NoResultsFound searchTerm={debouncedSearchTerm} />
+        ) : (
+          filteredSidebarItems.map((section: SidebarSection, index: number) => (
+            <div className="pt-2 pb-2 px-4" key={`section-${index}`}>
+              <div className="space-y-0" data-section={`section-${index}`}>
+                {section.items ? (
+                  <div className="flex items-center">
+                    <button
+                      className="p-1 hover:bg-gray-100 rounded-md"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse(`section-${index}`);
+                      }}
+                    >
+                      <div
+                        className={`transition-transform duration-150 ${collapsedGroups[`section-${index}`] ? '' : 'rotate-180'}`}
+                      >
+                        <svg
+                          className="h-3 w-3 text-gray-500"
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        >
+                          <polyline points="6 9 12 15 18 9" />
+                        </svg>
+                      </div>
+                    </button>
+                    <button
+                      className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md hover:bg-purple-50"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse(`section-${index}`);
+                      }}
+                    >
+                      <span className="truncate">{section.label}</span>
+                      {section.badge && section?.badge?.text && (
+                        <span
+                          className={`text-${section.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${section.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
+                        >
+                          {section.badge.text}
+                        </span>
+                      )}
+                    </button>
+                  </div>
+                ) : (
+                  <div className="flex items-center">
+                    <span className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md">
+                      <span className="truncate">{section.label}</span>
+                      <span className="text-purple-600 ml-2 text-[10px] font-medium bg-purple-50 px-2 py-0.5 rounded uppercase">
+                        Section
+                      </span>
+                    </span>
+                  </div>
+                )}
+
+                {section.items && (
+                  <div
+                    className={`overflow-hidden transition-[height] duration-150 ease-out ${
+                      collapsedGroups[`section-${index}`] ? 'h-0' : 'h-auto'
+                    }`}
+                  >
+                    <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
+                      {section.items.map((item: SidebarItem, itemIndex: number) => (
+                        <NestedItem
+                          key={`item-${index}-${itemIndex}`}
+                          item={item}
+                          currentPath={currentPath}
+                          parentId={`${index}`}
+                          itemIndex={itemIndex}
+                          collapsedGroups={collapsedGroups}
+                          toggleGroupCollapse={toggleGroupCollapse}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {section.slug && !section.items && (
+                  <a
+                    href={buildUrl(`/docs/custom/${section.slug}`)}
+                    className={`flex items-center px-2 py-1.5 text-xs ${
+                      currentPath.endsWith(`/${section.slug}`)
+                        ? 'bg-purple-100 text-purple-900 font-medium'
+                        : 'text-gray-600 hover:bg-purple-100'
+                    } rounded-md ml-6`}
+                    data-active={currentPath.endsWith(`/${section.slug}`)}
+                  >
+                    <span className="truncate">{section.label}</span>
+                  </a>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default React.memo(CustomDocsNav);

package/eventcatalog/src/components/SideNav/CustomDocsNav/types.ts

@@ -0,0 +1,29 @@
+export interface SidebarItem {
+  label: string;
+  slug?: string;
+  items?: SidebarItem[];
+  badge?: {
+    text: string;
+    color: string;
+  };
+  collapsed?: boolean;
+}
+
+export interface SidebarSection {
+  label: string;
+  items?: SidebarItem[];
+  slug?: string;
+  autogenerated?: {
+    directory: string;
+  };
+  badge?: {
+    text: string;
+    color: string;
+  };
+  collapsed?: boolean;
+}
+
+export interface CustomDocsNavProps {
+  sidebarItems: SidebarSection[];
+  currentPath: string;
+}

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

@@ -0,0 +1,9 @@
+---
+import { getNavigationItems } from '@enterprise/custom-documentation/utils/custom-docs';
+import CustomDocsNavWrapper from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNavWrapper';
+
+const currentPath = Astro.url.pathname;
+const sidebarItems = await getNavigationItems();
+---
+
+<CustomDocsNavWrapper client:load sidebarItems={sidebarItems} currentPath={currentPath} />

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

@@ -115,8 +115,8 @@ function groupChildrenByType(parentNode: TreeNode) {
     acc[n.type].push(n);
   });
 
-  // Collapse all messages
-  const AUTO_EXPANDED_TYPES = ['domains', 'services', 'channels'];
+  // Collapse everything except domains
+  const AUTO_EXPANDED_TYPES = ['domains'];
 
   parentNode.children = Object.entries(acc)
     // Order label nodes by RESOURCE_TYPES