@eventcatalog/core 2.4.0 → 2.5.1

package/src/components/MDX/NodeGraph/Nodes/Step.tsx

@@ -0,0 +1,69 @@
+import { EnvelopeIcon } from '@heroicons/react/16/solid';
+import type { CollectionEntry } from 'astro:content';
+import { Handle } from 'reactflow';
+
+interface Data {
+  title: string;
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  step: { id: string; title: string; summary: string };
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function StepNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, step, showTarget = true, showSource = true } = data as Data;
+
+  const { title, summary } = step;
+
+  const renderTarget = showTarget || true;
+  const renderSource = showSource || true;
+
+  return (
+    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400 min-h-[3em]')}>
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-gray-700 to-gray-700 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100-500',
+          `border-r-[1px] border-gray-500`
+        )}
+      >
+        {mode === 'full' && (
+          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+            Step
+          </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} />}
+
+        {!summary && (
+          <div className="h-full flex items-center">
+            <span className="text-sm font-bold block pb-0.5">{title}</span>
+          </div>
+        )}
+
+        {summary && (
+          <>
+            <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+              <span className="text-xs font-bold block pb-0.5">{title}</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>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/MDX/NodeGraph/Nodes/User.tsx

@@ -0,0 +1,79 @@
+import { UserIcon } from '@heroicons/react/20/solid';
+import { Handle } from 'reactflow';
+
+interface Data {
+  title: string;
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  step: { id: string; title: string; summary: string; name: string; actor: { name: string } };
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function UserNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, step, showTarget = true, showSource = true } = data as Data;
+
+  const { summary, actor: { name } = {} } = step;
+
+  const renderTarget = showTarget || true;
+  const renderSource = showSource || true;
+
+  return (
+    <div
+      className={classNames(
+        `w-full rounded-md border flex justify-start  bg-white text-black border-yellow-400`,
+        mode === 'full' ? 'min-h-[5em]' : 'min-h-[2em]'
+      )}
+    >
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-yellow-400 to-yellow-600 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100-500',
+          `border-r-[1px] border-yellow-500`
+        )}
+      >
+        <UserIcon 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] ">
+            ACTOR
+          </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} />}
+
+        {(!summary || mode !== 'full') && (
+          <div className="h-full ">
+            <span className="text-sm font-bold block pb-0.5 block w-full">{name}</span>
+            {mode === 'simple' && (
+              <div className="w-full text-right">
+                <span className=" w-full text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Event</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {summary && mode === 'full' && (
+          <>
+            <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+              <span className="text-xs font-bold block pb-0.5">{name}</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>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/MDX/components.tsx

@@ -3,6 +3,7 @@ import Schema from '@components/MDX/Schema';
 import File from '@components/MDX/File';
 import Accordion from '@components/MDX/Accordion/Accordion.astro';
 import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
+import Flow from '@components/MDX/Flow/Flow.astro';
 import Admonition from '@components/MDX/Admonition';
 import OpenAPI from '@components/MDX/OpenAPI/OpenAPI';
 
@@ -14,6 +15,7 @@ const components = (props: any) => {
   return {
     Accordion,
     AccordionGroup,
+    Flow,
     Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),

package/src/components/SideBars/DomainSideBar.astro

@@ -42,7 +42,7 @@ const ownersList = owners.map((o) => ({
       client:load
     />
     <OwnersList
-      title={`Service owners (${ownersList.length})`}
+      title={`Domain owners (${ownersList.length})`}
       owners={ownersList}
       emptyMessage={`This domain does not have any documented owners.`}
       client:load

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().optional().default('latest'),
-});
-
 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

@@ -5,6 +5,7 @@ import Footer from '@layouts/Footer.astro';
 
 import components from '@components/MDX/components';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
 
 // SideBars
 import ServiceSideBar from '@components/SideBars/ServiceSideBar.astro';
@@ -13,18 +14,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 +43,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 +73,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})`}