@eventcatalog/core 2.31.5 → 2.32.0

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.31.5";
+var version = "2.32.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-45XUM7UR.js";
-import "../chunk-VCKSLDEL.js";
+} from "../chunk-NPZQE3LM.js";
+import "../chunk-YXHR3YSA.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.31.5";
+var version = "2.32.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-NPIJWM72.js";
-import "../chunk-45XUM7UR.js";
-import "../chunk-VCKSLDEL.js";
+} from "../chunk-EIEK445B.js";
+import "../chunk-NPZQE3LM.js";
+import "../chunk-YXHR3YSA.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-NPIJWM72.js → chunk-EIEK445B.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-45XUM7UR.js";
+} from "./chunk-NPZQE3LM.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-45XUM7UR.js → chunk-NPZQE3LM.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-VCKSLDEL.js";
+} from "./chunk-YXHR3YSA.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-VCKSLDEL.js → chunk-YXHR3YSA.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.31.5";
+var version = "2.32.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.31.5";
+var version = "2.32.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-VCKSLDEL.js";
+} from "./chunk-YXHR3YSA.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.31.5";
+var version = "2.32.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,15 +6,15 @@ import {
 } from "./chunk-UKJ7F5WR.js";
 import {
   log_build_default
-} from "./chunk-NPIJWM72.js";
-import "./chunk-45XUM7UR.js";
+} from "./chunk-EIEK445B.js";
+import "./chunk-NPZQE3LM.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
 } from "./chunk-7SI5EVOX.js";
 import {
   VERSION
-} from "./chunk-VCKSLDEL.js";
+} from "./chunk-YXHR3YSA.js";
 import {
   isBackstagePluginEnabled,
   isEventCatalogProEnabled

package/eventcatalog/src/components/Lists/CustomSideBarSectionList.astro

@@ -0,0 +1,67 @@
+---
+import { buildUrl } from '@utils/url-builder';
+import { getCollection } from 'astro:content';
+import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import PillListFlat from './PillListFlat';
+interface Props {
+  section?: {
+    title?: string;
+    limit?: number;
+    items: {
+      id: string;
+      type: string;
+      version?: string;
+    }[];
+  };
+}
+
+const { section } = Astro.props;
+const title = section?.title || 'Custom Section';
+const limit = section?.limit || 10;
+const sectionItems = section?.items || [];
+
+// Type-safe mapping of resource types to collection names
+const resourceToCollectionMap = {
+  service: 'services',
+  event: 'events',
+  command: 'commands',
+  query: 'queries',
+  domain: 'domains',
+  flow: 'flows',
+  channel: 'channels',
+  user: 'users',
+  team: 'teams',
+} as const; // Make this a const assertion
+
+// Array to store resolved related resources
+const resolvedResources = [];
+
+// Fetch related resources
+for (const resource of sectionItems) {
+  try {
+    // Use type assertion to ensure TypeScript understands this is a valid collection name
+    const collectionName = resourceToCollectionMap[resource.type as keyof typeof resourceToCollectionMap];
+
+    // Use getEntry instead of getCollection for single item lookup by ID
+    const allItemsInCollection = await getCollection(collectionName);
+    // @ts-ignore
+    const entryToMatchVersion = getItemsFromCollectionByIdAndSemverOrLatest(allItemsInCollection, resource.id, resource.version);
+    const entry = entryToMatchVersion[0];
+
+    if (entry) {
+      resolvedResources.push(entry);
+    }
+  } catch (error) {
+    console.error(`Failed to fetch related resource: ${resource.id} of type ${resource.type}`, error);
+  }
+}
+
+const sectionList = resolvedResources.map((p: any) => ({
+  label: `${p.data.name}`,
+  tag: `v${p.data.version}`,
+  collection: p.collection,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+}));
+---
+
+<PillListFlat title={`${title} (${sectionList.length})`} pills={sectionList} color="orange" limit={limit} client:load />

package/eventcatalog/src/components/MDX/MessageTable/MessageTable.client.tsx

@@ -1,4 +1,4 @@
-import { getColorAndIconForMessageType } from '@components/Tables/columns/MessageTableColumns';
+import { getColorAndIconForCollection } from '@utils/collections/icons';
 import { buildUrl } from '@utils/url-builder';
 import { useState, useMemo, useCallback, memo } from 'react';
 
@@ -25,7 +25,7 @@ type MessageType = 'event' | 'query' | 'command' | null;
 
 const MessageRow = memo(
   ({ message, showChannels, collection }: { message: MessageTableMessage; showChannels?: boolean; collection: string }) => {
-    const { color, Icon } = getColorAndIconForMessageType(message.type);
+    const { color, Icon } = getColorAndIconForCollection(message.collection);
     const url = buildUrl(`/docs/${collection}/${message.id}/${message.version}`);
     let type = collection.slice(0, -1);
     type = type === 'querie' ? 'query' : type;

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

@@ -0,0 +1,126 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import { getCollection } from 'astro:content';
+import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import ResourceGroupTableClient from './ResourceGroupTable.client';
+import Admonition from '../Admonition';
+
+export interface Props extends CollectionEntry<'services'> {
+  limit?: number;
+  id: string;
+  showTags?: boolean;
+  showOwners?: boolean;
+  title?: string;
+  subtitle?: string;
+  description?: string;
+}
+
+const {
+  id,
+  limit,
+  showTags = false,
+  showOwners = false,
+  title = 'Resources',
+  subtitle,
+  description = 'Browse resources in this group or search by name, type, or description.',
+  ...resource
+} = Astro.props;
+
+// Find the requested resource group section by ID
+const section = resource.data.resourceGroups?.find((section: any) => section.id === id);
+
+const collection = Astro.props.collection as 'services' | 'domains';
+
+// Type-safe mapping of resource types to collection names
+const resourceToCollectionMap = {
+  service: 'services',
+  event: 'events',
+  command: 'commands',
+  query: 'queries',
+  domain: 'domains',
+  flow: 'flows',
+  channel: 'channels',
+  user: 'users',
+  team: 'teams',
+} as const;
+
+// This will hold our processed resources for the client component
+const resolvedResources: any[] = [];
+
+// Process each resource item in the section
+if (section?.items) {
+  for (const item of section.items) {
+    // Get the collection name from the resource type
+    const collectionName = resourceToCollectionMap[item.type as keyof typeof resourceToCollectionMap];
+
+    if (!collectionName) continue;
+
+    try {
+      // Get all items in the collection
+      const allItemsInCollection = await getCollection(collectionName);
+
+      // Find the specific version of the resource
+      const matchedItems = getItemsFromCollectionByIdAndSemverOrLatest(allItemsInCollection as any, item.id, item.version);
+
+      if (matchedItems.length > 0) {
+        const entry = matchedItems[0] as any;
+
+        // Create a simplified resource object for the client component
+        resolvedResources.push({
+          id: entry.data?.id || entry.id || item.id,
+          name: entry.data?.name || item.id,
+          version: entry.data?.version || item.version || '1.0.0',
+          collection: entry.collection || collectionName,
+          type: item.type,
+          summary: entry.data?.summary || '',
+          description: entry.data?.description || '',
+          owners: entry.data?.owners || [],
+          tags: entry.data?.tags || [],
+        });
+      }
+    } catch (error) {
+      console.error(`Error processing resource ${item.id} of type ${item.type}:`, error);
+    }
+  }
+}
+---
+
+{
+  resolvedResources.length > 0 && (
+    <ResourceGroupTableClient
+      client:load
+      resources={resolvedResources}
+      limit={limit}
+      title={title}
+      subtitle={subtitle}
+      description={description}
+      showTags={showTags}
+      showOwners={showOwners}
+    />
+  )
+}
+
+{
+  !resolvedResources.length && (
+    <Admonition type="warning">
+      <div>
+        {`<ResourceGroupTable/>`} cannot find any resources in your catalog for the resource group with id {id}.
+      </div>
+    </Admonition>
+  )
+}
+
+{
+  !section && (
+    <Admonition type="warning">
+      <div>
+        <span class="font-bold">
+          {`<ResourceGroupTable/>`} cannot find the resource group with id {id}.
+        </span>
+        <span class="block">
+          Please make sure the id is correct and the resource group is defined in this {collection.slice(0, -1)}.
+        </span>
+      </div>
+    </Admonition>
+  )
+}

package/eventcatalog/src/components/MDX/ResourceGroupTable/ResourceGroupTable.client.tsx

@@ -0,0 +1,408 @@
+import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { buildUrl } from '@utils/url-builder';
+import { useState, useMemo, useCallback, memo } from 'react';
+
+type Resource = {
+  id: string;
+  name: string;
+  version: string;
+  collection: string;
+  type: string;
+  summary?: string;
+  description?: string;
+  owners?: any[];
+  tags?: string[];
+};
+
+type ResourceGroupTableProps = {
+  resources: Resource[];
+  limit?: number;
+  showTags?: boolean;
+  showOwners?: boolean;
+  title: string;
+  subtitle: string;
+  description: string;
+};
+
+type ResourceType = 'service' | 'event' | 'query' | 'command' | 'domain' | 'flow' | 'channel' | 'user' | 'team' | null;
+
+const ResourceRow = memo(
+  ({ resource, showTags, showOwners }: { resource: Resource; showTags?: boolean; showOwners?: boolean }) => {
+    const { color, Icon } = getColorAndIconForCollection(resource.collection);
+    const url = buildUrl(`/docs/${resource.collection}/${resource.id}/${resource.version}`);
+    let type = resource.collection.slice(0, -1);
+    type = type === 'querie' ? 'query' : type;
+
+    const tags = resource.tags || [];
+    const owners = resource.owners || [];
+
+    return (
+      <tr className="group hover:bg-gray-100">
+        <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 relative">
+          <a href={url} className="absolute inset-0 z-10" aria-label={`View details for ${resource.name}`} />
+          <div className="flex items-center gap-2 relative">
+            <Icon className={`h-5 w-5 text-${color}-500`} />
+            <span className="group-hover:text-blue-600 break-all">{resource.name}</span>
+          </div>
+        </td>
+        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 relative">
+          <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
+          <span>v{resource.version}</span>
+        </td>
+        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 relative">
+          <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
+          <span>{type}</span>
+        </td>
+        <td className="px-3 py-4 text-sm text-gray-500 relative">
+          <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
+          <span className="line-clamp-2 break-words">{resource.summary || resource.description || '-'}</span>
+        </td>
+        {showTags && (
+          <td className="px-3 py-4 text-sm text-gray-500 relative">
+            <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
+            <div className="flex flex-wrap gap-1">
+              {tags.length > 0
+                ? tags.map((tag, index) => (
+                    <span
+                      key={`${tag}-${index}`}
+                      className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+                    >
+                      {tag}
+                    </span>
+                  ))
+                : '-'}
+            </div>
+          </td>
+        )}
+        {showOwners && (
+          <td className="px-3 py-4 text-sm text-gray-500 relative">
+            <a href={url} className="absolute inset-0 z-10" aria-hidden="true" />
+            <div className="flex flex-wrap gap-1">
+              {owners.length > 0
+                ? owners.map((owner, index) => (
+                    <span
+                      key={`${owner.id || owner.name}-${index}`}
+                      className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+                    >
+                      {owner.name || owner.id}
+                    </span>
+                  ))
+                : '-'}
+            </div>
+          </td>
+        )}
+      </tr>
+    );
+  }
+);
+
+const FilterButton = memo(
+  ({
+    type,
+    label,
+    typeFilter,
+    setTypeFilter,
+    setCurrentPage,
+    count,
+  }: {
+    type: ResourceType;
+    label: string;
+    typeFilter: ResourceType;
+    setTypeFilter: (type: ResourceType) => void;
+    setCurrentPage: (page: number) => void;
+    count: number;
+  }) => (
+    <button
+      onClick={() => {
+        setTypeFilter(typeFilter === type ? null : type);
+        setCurrentPage(1);
+      }}
+      className={`px-3 py-1 rounded-md text-sm font-medium ${
+        typeFilter === type
+          ? 'bg-black text-white border border-gray-200 hover:bg-gray-900'
+          : 'bg-white text-black border border-gray-200 hover:bg-gray-100'
+      }`}
+    >
+      {label} ({count})
+    </button>
+  )
+);
+
+const ResourceGroupTable = (props: ResourceGroupTableProps) => {
+  const { resources = [], limit, showTags = false, showOwners = false, title, subtitle = 'Resources', description } = props;
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [typeFilter, setTypeFilter] = useState<ResourceType>(null);
+  const itemsPerPage = limit || 10;
+
+  const filterResources = useCallback((resources: Resource[], searchTerm: string, typeFilter: ResourceType) => {
+    let filtered = resources;
+
+    if (typeFilter) {
+      filtered = filtered.filter((resource) => {
+        const collectionType = resource.collection.slice(0, -1);
+        const normalizedType = collectionType === 'querie' ? 'query' : collectionType;
+        return normalizedType === typeFilter;
+      });
+    }
+
+    if (searchTerm) {
+      const lowerSearchTerm = searchTerm.toLowerCase();
+      filtered = filtered.filter((resource) => {
+        const collectionType = resource.collection.slice(0, -1);
+        const normalizedType = collectionType === 'querie' ? 'query' : collectionType;
+
+        return (
+          resource.name.toLowerCase().includes(lowerSearchTerm) ||
+          resource.summary?.toLowerCase().includes(lowerSearchTerm) ||
+          resource.description?.toLowerCase().includes(lowerSearchTerm) ||
+          normalizedType.toLowerCase().includes(lowerSearchTerm) ||
+          resource.tags?.some((tag) => tag.toLowerCase().includes(lowerSearchTerm)) ||
+          false
+        );
+      });
+    }
+
+    return filtered;
+  }, []);
+
+  const filteredResources = useMemo(
+    () => filterResources(resources, searchTerm, typeFilter),
+    [resources, searchTerm, typeFilter, filterResources]
+  );
+
+  const totalPages = Math.ceil(filteredResources.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const paginatedResources = useMemo(
+    () => filteredResources.slice(startIndex, startIndex + itemsPerPage),
+    [filteredResources, startIndex, itemsPerPage]
+  );
+
+  // Get unique resource types and their counts
+  const resourceTypeCounts = useMemo(() => {
+    const counts = new Map<ResourceType, number>();
+    resources.forEach((resource) => {
+      const collectionType = resource.collection.slice(0, -1);
+      const normalizedType = (collectionType === 'querie' ? 'query' : collectionType) as ResourceType;
+      counts.set(normalizedType, (counts.get(normalizedType) || 0) + 1);
+    });
+    return counts;
+  }, [resources]);
+
+  const availableTypes = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          resources.map((resource) => {
+            const collectionType = resource.collection.slice(0, -1);
+            return collectionType === 'querie' ? 'query' : collectionType;
+          })
+        )
+      ) as ResourceType[],
+    [resources]
+  );
+
+  const filterButtons = useMemo(
+    () =>
+      availableTypes
+        .filter((type): type is NonNullable<ResourceType> => type !== null)
+        .map((type) => ({
+          type,
+          // Format the label to be capitalized and pluralized if needed
+          label: type.charAt(0).toUpperCase() + type.slice(1) + (type.endsWith('s') ? '' : 's'),
+          count: resourceTypeCounts.get(type) || 0,
+        })),
+    [availableTypes, resourceTypeCounts]
+  );
+
+  return (
+    <div className="mx-auto not-prose py-4 space-y-4 my-4">
+      {title && <h2 className="text-2xl font-semibold">{title}</h2>}
+      <div className="flow-root bg-white border-gray-200 border p-4 pb-2 rounded-lg text-gray-900">
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold">
+            {subtitle} ({searchTerm || typeFilter ? `${filteredResources.length}/${resources.length}` : resources.length})
+          </h2>
+          <span className="text-sm text-gray-700">{description}</span>
+
+          {/* Type filter buttons - only shown if there are filter options */}
+          {filterButtons.length > 0 && (
+            <div className="flex gap-2 pb-2 flex-wrap">
+              {filterButtons.map((button) => (
+                <FilterButton
+                  key={button.type}
+                  type={button.type}
+                  label={button.label}
+                  count={button.count}
+                  typeFilter={typeFilter}
+                  setTypeFilter={setTypeFilter}
+                  setCurrentPage={setCurrentPage}
+                />
+              ))}
+            </div>
+          )}
+
+          <div className="relative">
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              <svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path
+                  fillRule="evenodd"
+                  d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </div>
+            <input
+              type="text"
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setCurrentPage(1); // Reset to first page when searching
+              }}
+              placeholder="Search by name, type, description, or tags..."
+              className="block w-full rounded-md border-0 py-1.5 pl-10 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+            />
+            {searchTerm && (
+              <button
+                onClick={() => {
+                  setSearchTerm('');
+                  setCurrentPage(1); // Reset to first page when clearing search
+                }}
+                className="absolute inset-y-0 right-0 flex items-center pr-3"
+                aria-label="Clear search"
+              >
+                <svg className="h-5 w-5 text-gray-400 hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="overflow-x-auto">
+          <div className="inline-block min-w-full py-2 align-middle">
+            <div className="max-w-full overflow-hidden">
+              <table className="min-w-full table-fixed divide-y divide-gray-300 rounded-sm bg-white">
+                <thead>
+                  <tr>
+                    <th
+                      scope="col"
+                      className={`${showTags || showOwners ? 'w-1/5' : 'w-1/4'} py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6`}
+                    >
+                      Name
+                    </th>
+                    <th scope="col" className="w-[100px] px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      Version
+                    </th>
+                    <th scope="col" className="w-[100px] py-3.5 pl-3.5 pr-3 text-left text-sm font-semibold text-gray-900">
+                      Type
+                    </th>
+                    <th
+                      scope="col"
+                      className={`${showTags && showOwners ? 'w-1/4' : showTags || showOwners ? 'w-1/3' : 'w-1/2'} px-3 py-3.5 text-left text-sm font-semibold text-gray-900`}
+                    >
+                      Description
+                    </th>
+                    {showTags && (
+                      <th scope="col" className="w-1/6 px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                        Tags
+                      </th>
+                    )}
+                    {showOwners && (
+                      <th scope="col" className="w-1/6 px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                        Owners
+                      </th>
+                    )}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {paginatedResources.length > 0 ? (
+                    paginatedResources.map((resource) => (
+                      <ResourceRow
+                        key={`${resource.collection}-${resource.id}-${resource.version}`}
+                        resource={resource}
+                        showTags={showTags}
+                        showOwners={showOwners}
+                      />
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan={showTags && showOwners ? 6 : showTags || showOwners ? 5 : 4}
+                        className="text-center py-4 text-sm text-gray-500"
+                      >
+                        No resources found
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 -mt-2">
+            <div className="flex flex-1 justify-between sm:hidden">
+              <button
+                onClick={() => setCurrentPage(currentPage - 1)}
+                disabled={currentPage === 1}
+                className={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${currentPage === 1 ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'}`}
+              >
+                Previous
+              </button>
+              <button
+                onClick={() => setCurrentPage(currentPage + 1)}
+                disabled={currentPage === totalPages}
+                className={`relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${currentPage === totalPages ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'}`}
+              >
+                Next
+              </button>
+            </div>
+            <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+              <div>
+                <p className="text-sm text-gray-700">
+                  Showing <span className="font-medium">{startIndex + 1}</span> to{' '}
+                  <span className="font-medium">{Math.min(startIndex + itemsPerPage, filteredResources.length)}</span> of{' '}
+                  <span className="font-medium">{filteredResources.length}</span> results
+                </p>
+              </div>
+              <div>
+                <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+                  <button
+                    onClick={() => setCurrentPage(currentPage - 1)}
+                    disabled={currentPage === 1}
+                    className={`relative inline-flex items-center rounded-l-md px-2 py-2 ${currentPage === 1 ? 'text-gray-300' : 'text-gray-400 hover:bg-gray-50'} ring-1 ring-inset ring-gray-300`}
+                  >
+                    <span className="sr-only">Previous</span>
+                    <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path
+                        fillRule="evenodd"
+                        d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={() => setCurrentPage(currentPage + 1)}
+                    disabled={currentPage === totalPages}
+                    className={`relative inline-flex items-center rounded-r-md px-2 py-2 ${currentPage === totalPages ? 'text-gray-300' : 'text-gray-400 hover:bg-gray-50'} ring-1 ring-inset ring-gray-300`}
+                  >
+                    <span className="sr-only">Next</span>
+                    <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path
+                        fillRule="evenodd"
+                        d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                </nav>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ResourceGroupTable;

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

@@ -13,6 +13,7 @@ import OpenAPI from '@components/MDX/OpenAPI/OpenAPI.astro';
 import AsyncAPI from '@components/MDX/AsyncAPI/AsyncAPI.astro';
 import ChannelInformation from '@components/MDX/ChannelInformation/ChannelInformation';
 import MessageTable from '@components/MDX/MessageTable/MessageTable.astro';
+import ResourceGroupTable from '@components/MDX/ResourceGroupTable/ResourceGroupTable.astro';
 import Tabs from '@components/MDX/Tabs/Tabs.astro';
 import TabItem from '@components/MDX/Tabs/TabItem.astro';
 
@@ -41,6 +42,7 @@ const components = (props: any) => {
     SchemaViewer: (mdxProp: any) => SchemaViewerPortal({ ...props.data, ...mdxProp }),
     Schema: (mdxProp: any) => jsx(Schema, { ...props, ...mdxProp }),
     MessageTable: (mdxProp: any) => jsx(MessageTable, { ...props, ...mdxProp }),
+    ResourceGroupTable: (mdxProp: any) => jsx(ResourceGroupTable, { ...props, ...mdxProp }),
   };
 };
 

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

@@ -4,6 +4,7 @@ import PillListFlat from '@components/Lists/PillListFlat';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
 import { getUbiquitousLanguage, getMessagesForDomain } from '@utils/collections/domains';
+import CustomSideBarSectionList from '@components/Lists/CustomSideBarSectionList.astro';
 import { getOwner } from '@utils/collections/owners';
 import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
@@ -27,6 +28,8 @@ const filteredOwners = owners.filter((o) => o !== undefined);
 
 const messagesForDomain = await getMessagesForDomain(domain);
 
+const resourceGroups = domain.data?.resourceGroups || [];
+
 const serviceList = services.map((p) => ({
   label: p.data.name,
   badge: p.collection,
@@ -73,6 +76,11 @@ const ownersList = filteredOwners.map((o) => ({
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
   <div>
+    {
+      resourceGroups
+        .filter((section) => section.items.length > 0 && section.sidebar)
+        .map((section) => <CustomSideBarSectionList section={section} />)
+    }
     <PillListFlat
       title={`Services (${services.length})`}
       pills={serviceList}

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

@@ -6,7 +6,7 @@ import { getOwner } from '@utils/collections/owners';
 import type { CollectionEntry } from 'astro:content';
 import { ScrollText, Workflow, RssIcon } from 'lucide-react';
 import config from '@config';
-
+import CustomSideBarSectionList from '@components/Lists/CustomSideBarSectionList.astro';
 interface Props {
   flow: CollectionEntry<'flows'>;
 }
@@ -17,6 +17,8 @@ const ownersRaw = flow.data?.owners || [];
 const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
 const filteredOwners = owners.filter((o) => o !== undefined);
 
+const resourceGroups = flow.data?.resourceGroups || [];
+
 const ownersList = filteredOwners.map((o) => ({
   label: o.data.name,
   type: o.collection,
@@ -30,6 +32,11 @@ 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="">
+    {
+      resourceGroups
+        .filter((section) => section.items.length > 0 && section.sidebar)
+        .map((section) => <CustomSideBarSectionList section={section} />)
+    }
     {flow.data.versions && <VersionList versions={flow.data.versions} collectionItem={flow} />}
 
     <OwnersList

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

@@ -9,6 +9,7 @@ import { buildUrl } from '@utils/url-builder';
 import { FileDownIcon, ScrollText, Workflow, RssIcon } from 'lucide-react';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
 import { getOwner } from '@utils/collections/owners';
+import CustomSideBarSectionList from '@components/Lists/CustomSideBarSectionList.astro';
 import config from '@config';
 
 interface Props {
@@ -25,6 +26,8 @@ const ownersRaw = message.data?.owners || [];
 const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
 const filteredOwners = owners.filter((o) => o !== undefined);
 
+const resourceGroups = message.data?.resourceGroups || [];
+
 const producerList = producers.map((p) => ({
   label: `${p.data.name}`,
   tag: `v${p.data.version}`,
@@ -98,6 +101,11 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
   <div class="">
+    {
+      resourceGroups
+        .filter((section) => section.items.length > 0 && section.sidebar)
+        .map((section) => <CustomSideBarSectionList section={section} />)
+    }
     {
       producerList.length > 0 && (
         <PillListFlat

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

@@ -3,6 +3,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import PillListFlat from '@components/Lists/PillListFlat';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
 import SpecificationsList from '@components/Lists/SpecificationsList.astro';
+import CustomSideBarSectionList from '@components/Lists/CustomSideBarSectionList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
 import { buildUrl } from '@utils/url-builder';
 import { getOwner } from '@utils/collections/owners';
@@ -10,7 +11,6 @@ import type { CollectionEntry } from 'astro:content';
 import { ScrollText, Workflow, FileDownIcon, Code, Link, RssIcon } from 'lucide-react';
 import { join } from 'node:path';
 import config from '@config';
-
 interface Props {
   service: CollectionEntry<'services'>;
 }
@@ -26,6 +26,8 @@ const ownersRaw = service.data?.owners || [];
 const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
 const filteredOwners = owners.filter((o) => o !== undefined);
 
+const resourceGroups = service.data?.resourceGroups || [];
+
 const sendsList = sends
   .sort((a, b) => a.collection.localeCompare(b.collection))
   .map((p) => ({
@@ -66,6 +68,11 @@ const schemaURL = join(publicPath, schemaFilePath || '');
 
 <aside class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
   <div id="sidebar-cta-portal" class="">
+    {
+      resourceGroups
+        .filter((section) => section.items.length > 0 && section.sidebar)
+        .map((section) => <CustomSideBarSectionList section={section} />)
+    }
     <PillListFlat
       title={`Receives Messages (${receivesList.length})`}
       pills={receivesList}

package/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -1,9 +1,9 @@
-import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
+import { ServerIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import { useMemo, useState } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
-import { getColorAndIconForMessageType } from './MessageTableColumns';
+import { getColorAndIconForCollection } from '@utils/collections/icons';
 import { createBadgesColumn } from './SharedColumns';
 import type { TData } from '../Table';
 
@@ -66,10 +66,9 @@ export const columns = () => [
       const receiversWithIcons = useMemo(
         () =>
           receives?.map((consumer) => {
-            const type = consumer.collection.slice(0, -1);
             return {
               ...consumer,
-              ...getColorAndIconForMessageType(type),
+              ...getColorAndIconForCollection(consumer.collection),
             };
           }) || [],
         [receives]
@@ -131,10 +130,9 @@ export const columns = () => [
       const sendersWithIcons = useMemo(
         () =>
           sends?.map((sender) => {
-            const type = sender.collection.slice(0, -1);
             return {
               ...sender,
-              ...getColorAndIconForMessageType(type),
+              ...getColorAndIconForCollection(sender.collection),
             };
           }) || [],
         [sends]

package/eventcatalog/src/components/Tables/columns/TeamsTableColumns.tsx

@@ -5,26 +5,11 @@ import { filterByName, filterCollectionByName } from '../filters/custom-filters'
 import { buildUrl } from '@utils/url-builder';
 import type { TData } from '../Table';
 import type { CollectionUserTypes } from '@types';
-import { User, Users } from 'lucide-react';
 import type { CollectionEntry } from 'astro:content';
 import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
 
 const columnHelper = createColumnHelper<TData<CollectionUserTypes>>();
 
-export const getColorAndIconForMessageType = (type: string) => {
-  switch (type) {
-    case 'event':
-      return { color: 'orange', Icon: BoltIcon };
-    case 'command':
-      return { color: 'blue', Icon: ChatBubbleLeftIcon };
-    case 'querie':
-    case 'query':
-      return { color: 'green', Icon: MagnifyingGlassIcon };
-    default:
-      return { color: 'gray', Icon: ChatBubbleLeftIcon };
-  }
-};
-
 export const columns = () => [
   columnHelper.accessor('data.name', {
     id: 'name',

package/eventcatalog/src/content.config.ts

@@ -35,6 +35,12 @@ const channelPointer = z
   })
   .merge(pointer);
 
+const resourcePointer = z.object({
+  id: z.string(),
+  version: z.string().optional().default('latest'),
+  type: z.enum(['service', 'event', 'command', 'query', 'flow', 'channel', 'domain', 'user', 'team']),
+});
+
 const changelogs = defineCollection({
   loader: glob({
     pattern: ['**/changelog.(md|mdx)'],
@@ -87,6 +93,17 @@ const baseSchema = z.object({
     })
     .optional(),
   hidden: z.boolean().optional(),
+  resourceGroups: z
+    .array(
+      z.object({
+        id: z.string().optional(),
+        title: z.string().optional(),
+        items: z.array(resourcePointer),
+        limit: z.number().optional().default(10),
+        sidebar: z.boolean().optional().default(true),
+      })
+    )
+    .optional(),
   // Used by eventcatalog
   versions: z.array(z.string()).optional(),
   latestVersion: z.string().optional(),

package/eventcatalog/src/utils/collections/icons.ts

@@ -43,3 +43,32 @@ export const getIconForCollection = (collection: string) => {
       return ServerIcon;
   }
 };
+
+export const getColorAndIconForCollection = (collection: string) => {
+  const icon = getIconForCollection(collection);
+
+  switch (collection) {
+    case 'events':
+      return { color: 'orange', Icon: icon };
+    case 'commands':
+      return { color: 'blue', Icon: icon };
+    case 'queries':
+      return { color: 'green', Icon: icon };
+    case 'flows':
+      return { color: 'teal', Icon: icon };
+    case 'teams':
+      return { color: 'red', Icon: icon };
+    case 'users':
+      return { color: 'gray', Icon: icon };
+    case 'channels':
+      return { color: 'purple', Icon: icon };
+    case 'ubiquitousLanguages':
+      return { color: 'green', Icon: icon };
+    case 'domains':
+      return { color: 'yellow', Icon: icon };
+    case 'services':
+      return { color: 'pink', Icon: icon };
+    default:
+      return { color: 'gray', Icon: icon };
+  }
+};

package/eventcatalog/src/utils/collections/services.ts

@@ -21,10 +21,10 @@ let cachedServices: Record<string, Service[]> = {
 export const getServices = async ({ getAllVersions = true }: Props = {}): Promise<Service[]> => {
   const cacheKey = getAllVersions ? 'allVersions' : 'currentVersions';
 
-  // // Check if we have cached domains for this specific getAllVersions value
-  // if (cachedServices[cacheKey].length > 0) {
-  //   return cachedServices[cacheKey];
-  // }
+  // Check if we have cached domains for this specific getAllVersions value
+  if (cachedServices[cacheKey].length > 0) {
+    return cachedServices[cacheKey];
+  }
 
   // Get services that are not versioned
   const services = await getCollection('services', (service) => {

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.31.5",
+  "version": "2.32.0",
   "publishConfig": {
     "access": "public"
   },