@eventcatalog/core 5.0.0-beta.1 → 5.0.0-beta.11

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

@@ -1,38 +1,20 @@
 ---
-import DomainGrid from '@components/Grids/DomainGrid';
-import SystemGrid from '@components/Grids/SystemGrid';
-import MessageGrid from '@components/Grids/MessageGrid';
-import { getSpecificationsForService } from '@utils/collections/services';
-
-import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+// The architecture overview pages were replaced by the Resources pages; this route only
+// redirects so old links keep working.
+import LatestVersionRedirect from '@components/LatestVersionRedirect.astro';
+import { isSSR } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
 import { Page } from './_index.data';
 
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-// Get data
-const props = await Page.getData(Astro);
-let domain = props;
-
-const pageTitle = `${props.type} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
-
-const type = props.type;
+const { data, redirectPath } = await Page.getData(Astro);
+const redirectUrl = buildUrl(redirectPath);
 
-const specifications = type === 'services' ? getSpecificationsForService(props) : [];
+if (isSSR()) {
+  return Astro.redirect(`${redirectUrl}${Astro.url.search}${Astro.url.hash}`, 301);
+}
 ---
 
-<VerticalSideBarLayout title={pageTitle}>
-  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]">
-    <div class="flex docs-layout w-full">
-      <div class="w-full min-w-0 lg:mr-2 xl:pr-12 py-8 bg-[rgb(var(--ec-page-bg))]">
-        {type === 'domains' && <DomainGrid domain={domain} client:load />}
-        {type === 'systems' && <SystemGrid system={props} client:load />}
-        {
-          (type === 'agents' || type === 'services') && (
-            <MessageGrid service={props} specifications={specifications} client:load />
-          )
-        }
-      </div>
-    </div>
-  </main>
-</VerticalSideBarLayout>
+<LatestVersionRedirect title={`${data.name} | Resources`} redirectUrl={redirectUrl} />

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/resources/_ResourcesPage.astro

@@ -0,0 +1,79 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+import { isVisualiserEnabled } from '@utils/feature';
+import {
+  ResourcesTable,
+  type ResourceItem,
+} from '@components/Tables/Resources/ResourcesTable';
+import { getCollection } from 'astro:content';
+import {
+  getDocsPath,
+  getFavorite,
+  getResourceGroups,
+  getResourceRelationship,
+  getSchemaPath,
+  getVisualiserPath,
+  type ResourceOwner,
+  type ResourceOwnerCollection,
+} from '@utils/collections/resources';
+
+// Shared by the generic Resources route and the services route.
+interface Props {
+  resourceOwner: ResourceOwner;
+}
+
+const { resourceOwner } = Astro.props;
+const { data } = resourceOwner;
+const ownerCollection = resourceOwner.collection as ResourceOwnerCollection;
+
+// Only show resources directly attached to the owner. Domain child resources are not
+// flattened, so services inside a child system remain on that system's page.
+const resourceGroups = getResourceGroups(data, ownerCollection, resourceOwner);
+
+const withBaseUrl = (path: string | undefined) => (path ? buildUrl(path) : undefined);
+
+// Messages with an entry in the schemas collection have a schema page.
+const schemaKeys = new Set(
+  (await getCollection('schemas')).map(
+    ({ data: schema }) => `${schema.message.collectionName}:${schema.message.id}:${schema.message.version}`
+  )
+);
+
+const resources: ResourceItem[] = resourceGroups.flatMap(({ collection, items }) =>
+  items.map((item) => ({
+    collection,
+    id: item.data.id,
+    name: item.data.name || item.data.id,
+    version: item.data.version,
+    summary: item.data.summary,
+    icon: item.data?.styles?.icon,
+    href: buildUrl(getDocsPath(collection, item)),
+    visualiserHref: withBaseUrl(getVisualiserPath(collection, item, isVisualiserEnabled())),
+    schemaHref: withBaseUrl(getSchemaPath(collection, item, schemaKeys)),
+    favorite: getFavorite(collection, item),
+    relationship: getResourceRelationship(data, ownerCollection, collection, item, resourceOwner),
+  }))
+);
+---
+
+<VerticalSideBarLayout title={`${data.name} | Resources`}>
+  <style is:global>
+    :root[data-embedded='true'] #resources-page {
+      height: 100dvh !important;
+    }
+  </style>
+  {/* Like the discover pages: pull the table out of the content gutter and fill the viewport so it can paginate. */}
+  <main
+    id="resources-page"
+    class="flex h-full min-h-0 flex-col overflow-hidden bg-[rgb(var(--ec-page-bg))]"
+    style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);"
+  >
+    <ResourcesTable
+      resources={resources}
+      title={`${data.name} Resources`}
+      description={`${resources.length} ${resources.length === 1 ? 'resource' : 'resources'} mapped to ${data.name}.`}
+      client:only="react"
+    />
+  </main>
+</VerticalSideBarLayout>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/resources/_index.data.spec.ts

@@ -1,28 +1,46 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { loadResourceOwner } from './_index.data';
+import { Page, ServicePage } from './_index.data';
 
-const collectionMocks = vi.hoisted(() => ({
-  getDomains: vi.fn(() => Promise.resolve([])),
-  getSystems: vi.fn(() => Promise.resolve([])),
+const mocks = vi.hoisted(() => ({
+  getOwnersWithResources: vi.fn(),
+  findOwnerWithResources: vi.fn(),
 }));
 
-vi.mock('@utils/collections/domains', () => ({ getDomains: collectionMocks.getDomains }));
-vi.mock('@utils/collections/systems', () => ({ getSystems: collectionMocks.getSystems }));
+vi.mock('@utils/feature', () => ({ isSSR: () => false }));
+vi.mock('@utils/collections/resource-owners', () => ({
+  RESOURCE_OWNER_COLLECTIONS: ['domains', 'systems', 'services', 'flows', 'channels', 'events', 'commands', 'queries'],
+  createResourcesCatalog: () => ({}),
+  getOwnersWithResources: mocks.getOwnersWithResources,
+  findOwnerWithResources: mocks.findOwnerWithResources,
+}));
+
+const owner = (collection: string, id: string) => ({ collection, data: { id, version: '1.0.0' } });
 
-describe('Resources page owner loader', () => {
+describe('Resources routes', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
+    mocks.getOwnersWithResources.mockReset().mockImplementation(async (type: string) => [owner(type, `${type}-owner`)]);
+    mocks.findOwnerWithResources.mockReset();
   });
 
-  it('loads domains without flattening child-subdomain services and agents', async () => {
-    await loadResourceOwner('domains');
+  // /docs/services/[id]/[docType]/[docId] would otherwise catch /docs/services/{id}/{version}/resources,
+  // so services get their own route and the generic route leaves them out.
+  it('gives every owner type but services a path on the generic route', async () => {
+    const paths = await Page.getStaticPaths();
 
-    expect(collectionMocks.getDomains).toHaveBeenCalledWith({ includeServicesInSubdomains: false });
+    expect(paths.map(({ params }) => params.type)).toEqual(['domains', 'systems', 'flows', 'channels', 'events', 'commands', 'queries']);
+    expect(paths[0]).toEqual({ params: { type: 'domains', id: 'domains-owner', version: '1.0.0' }, props: owner('domains', 'domains-owner') });
   });
 
-  it('keeps the system loader unchanged', async () => {
-    await loadResourceOwner('systems');
+  it('gives services their own route without a type param', async () => {
+    const paths = await ServicePage.getStaticPaths();
+
+    expect(paths).toEqual([{ params: { id: 'services-owner', version: '1.0.0' }, props: owner('services', 'services-owner') }]);
+  });
 
-    expect(collectionMocks.getSystems).toHaveBeenCalledWith();
+  it('returns not found for types without a Resources page on a server request', async () => {
+    await expect(Page.getData({ params: { type: 'entities', id: 'Order', version: '1.0.0' }, props: {} } as any)).rejects.toMatchObject({
+      status: 404,
+    });
+    expect(mocks.findOwnerWithResources).not.toHaveBeenCalled();
   });
 });

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/resources/_index.data.ts

@@ -1,74 +1,79 @@
 import { isSSR } from '@utils/feature';
 import { HybridPage } from '@utils/page-loaders/hybrid-page';
-import { hasResources } from './_resources';
+import type { ResourceOwner, ResourceOwnerCollection } from '@utils/collections/resources';
+import {
+  createResourcesCatalog,
+  findOwnerWithResources,
+  getOwnersWithResources,
+  RESOURCE_OWNER_COLLECTIONS,
+} from '@utils/collections/resource-owners';
 
-// The Resources page lists the resources directly attached to a single system or
-// domain. It is only available for systems and domains — every other resource type 404s.
-const SUPPORTED_TYPES = ['systems', 'domains'] as const;
-type SupportedType = (typeof SUPPORTED_TYPES)[number];
+// The Resources page lists the resources attached to a single system, domain, service, flow,
+// channel or message. Every other resource type 404s.
+//
+// Services have their own route (pages/docs/services/[id]/[version]/resources), because the
+// version-less alias /docs/services/[id]/[docType]/[docId] outranks this generic route and
+// would otherwise catch /docs/services/{id}/{version}/resources.
+const GENERIC_ROUTE_TYPES = RESOURCE_OWNER_COLLECTIONS.filter((type) => type !== 'services');
 
-const isSupportedType = (type: string): type is SupportedType => SUPPORTED_TYPES.includes(type as SupportedType);
+type RouteParams = { type?: string; id?: string; version?: string };
 
-export const loadResourceOwner = async (type: SupportedType) => {
-  if (type === 'systems') {
-    const { getSystems } = await import('@utils/collections/systems');
-    return getSystems();
-  }
-  const { getDomains } = await import('@utils/collections/domains');
-  return getDomains({ includeServicesInSubdomains: false });
-};
+const createResourcesPage = ({
+  types,
+  toParams,
+  typeOf,
+}: {
+  types: ResourceOwnerCollection[];
+  toParams: (type: ResourceOwnerCollection, owner: ResourceOwner) => RouteParams;
+  typeOf: (params: RouteParams) => string | undefined;
+}) =>
+  class extends HybridPage {
+    static get prerender(): boolean {
+      return !isSSR();
+    }
 
-export class Page extends HybridPage {
-  static get prerender(): boolean {
-    return !isSSR();
-  }
+    static async getStaticPaths(): Promise<Array<{ params: RouteParams; props: ResourceOwner }>> {
+      if (isSSR()) {
+        return [];
+      }
 
-  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
-    if (isSSR()) {
-      return [];
+      const catalog = createResourcesCatalog();
+      const paths: Array<{ params: RouteParams; props: ResourceOwner }> = [];
+      for (const type of types) {
+        for (const owner of await getOwnersWithResources(type, catalog)) {
+          paths.push({ params: toParams(type, owner), props: owner });
+        }
+      }
+      return paths;
     }
 
-    const owners = await Promise.all(SUPPORTED_TYPES.map((type) => loadResourceOwner(type)));
-
-    return SUPPORTED_TYPES.flatMap((type, index) =>
-      owners[index]
-        .filter((owner) => hasResources(owner, type))
-        .map((owner) => ({
-          params: {
-            type,
-            id: owner.data.id,
-            version: owner.data.version,
-          },
-          props: {
-            ...owner,
-          },
-        }))
-    );
-  }
+    protected static async fetchData(params: RouteParams) {
+      const type = typeOf(params);
+      const { id, version } = params;
 
-  protected static async fetchData(params: any) {
-    const { type, id, version } = params;
+      if (!type || !id || !version || !types.includes(type as ResourceOwnerCollection)) {
+        return null;
+      }
 
-    if (!type || !id || !version || !isSupportedType(type)) {
-      return null;
+      return findOwnerWithResources(type as ResourceOwnerCollection, id, version);
     }
 
-    const owners = await loadResourceOwner(type);
-    const owner = owners.find((o) => o.data.id === id && o.data.version === version);
-
-    if (!owner || !hasResources(owner, type)) {
-      return null;
+    protected static createNotFoundResponse(): Response {
+      return new Response(null, {
+        status: 404,
+        statusText: 'Resources not found',
+      });
     }
+  };
 
-    return {
-      ...owner,
-    };
-  }
+export const Page = createResourcesPage({
+  types: GENERIC_ROUTE_TYPES,
+  toParams: (type, owner) => ({ type, id: owner.data.id, version: owner.data.version }),
+  typeOf: (params) => params.type,
+});
 
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Resources not found',
-    });
-  }
-}
+export const ServicePage = createResourcesPage({
+  types: ['services'],
+  toParams: (_type, owner) => ({ id: owner.data.id, version: owner.data.version }),
+  typeOf: () => 'services',
+});

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

@@ -1,71 +1,11 @@
 ---
-import Footer from '@layouts/Footer.astro';
-import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { buildUrl } from '@utils/url-builder';
-import {
-  SystemResourcesTable,
-  type SystemResourceItem,
-  type SystemResourceCollection,
-} from '@components/Tables/SystemResources/SystemResourcesTable';
-import { getResourceGroups, type ResourceOwnerCollection } from './_resources';
-
+import ResourcesPage from './_ResourcesPage.astro';
 import { Page } from './_index.data';
 
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
 const resourceOwner = await Page.getData(Astro);
-const { data } = resourceOwner;
-const ownerCollection = resourceOwner.collection as ResourceOwnerCollection;
-
-// Only show resources directly attached to this system/domain. Domain child resources
-// are not flattened, so services inside a child system remain on that system's page.
-const resourceGroups = getResourceGroups(data, ownerCollection);
-
-const hrefForResource = (collection: SystemResourceCollection, id: string, version: string) => {
-  if (collection === 'entities') {
-    return buildUrl(`/docs/entities/${id}/${version}`);
-  }
-  return buildUrl(`/docs/${collection}/${id}/${version}`);
-};
-
-const ownerTypeLabel = ownerCollection === 'domains' ? 'Domain' : 'System';
-
-const resources: SystemResourceItem[] = resourceGroups.flatMap(({ collection, items }) =>
-  items.map((item: any) => ({
-    collection,
-    id: item.data.id,
-    name: item.data.name || item.data.id,
-    version: item.data.version,
-    summary: item.data.summary,
-    icon: item.data?.styles?.icon,
-    href: hrefForResource(collection, item.data.id, item.data.version),
-  }))
-);
 ---
 
-<VerticalSideBarLayout title={`${data.name} | Resources`}>
-  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]">
-    <div class="flex docs-layout w-full">
-      <div class="w-full min-w-0 lg:mr-2 xl:pr-12 py-8 bg-[rgb(var(--ec-page-bg))]">
-        {/* Header mirrors the resource page (docs/[type]/[id]/[version]/index.astro). */}
-        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-3 pt-4">
-          <div class="flex flex-col gap-4">
-            <span class="text-xs md:text-sm font-semibold text-[rgb(var(--ec-accent))] capitalize">{ownerTypeLabel}</span>
-            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">
-              {data.name} Resources
-            </h2>
-          </div>
-          <p class="text-base pt-4 pb-1 text-[rgb(var(--ec-page-text-muted))] font-light">
-            {resources.length} {resources.length === 1 ? 'resource' : 'resources'} mapped to the {data.name}{' '}
-            {ownerTypeLabel.toLowerCase()}.
-          </p>
-        </div>
-
-        <div class="pt-8 pb-4 w-full">
-          <SystemResourcesTable resources={resources} client:only="react" />
-        </div>
-      </div>
-    </div>
-  </main>
-</VerticalSideBarLayout>
+<ResourcesPage resourceOwner={resourceOwner} />

package/eventcatalog/src/pages/docs/services/[id]/[version]/resources/index.astro

@@ -0,0 +1,13 @@
+---
+// Services need their own Resources route: /docs/services/[id]/[docType]/[docId] outranks
+// the generic /docs/[type]/[id]/[version]/resources route and would catch these URLs.
+import ResourcesPage from '../../../../[type]/[id]/[version]/resources/_ResourcesPage.astro';
+import { ServicePage } from '../../../../[type]/[id]/[version]/resources/_index.data';
+
+export const prerender = ServicePage.prerender;
+export const getStaticPaths = ServicePage.getStaticPaths;
+
+const resourceOwner = await ServicePage.getData(Astro);
+---
+
+<ResourcesPage resourceOwner={resourceOwner} />

package/eventcatalog/src/stores/sidebar-store/builders/domain.ts

@@ -11,6 +11,7 @@ import {
   buildDiagramNavItems,
   buildResourceDocsSection,
   buildArchitectureDecisionsSection,
+  buildResourcesLink,
 } from './shared';
 import { isVisualiserEnabled, isChangelogEnabled } from '@utils/feature';
 import { pluralizeMessageType } from '@utils/collections/messages';
@@ -131,19 +132,6 @@ export const buildDomainSections = (
   const sortedReceivesMessages = [...receivesMessages].sort(byResourceName);
   const renderMessages = shouldRenderSideBarSection(domain, 'messages');
 
-  // The Resources page/link only makes sense when the domain has direct resources.
-  // Keep this aligned with the resource groups rendered by the page.
-  const hasResources =
-    subDomains.length > 0 ||
-    systemsInDomain.length > 0 ||
-    agentsInDomain.length > 0 ||
-    dataProductsInDomain.length > 0 ||
-    allServicesInDomain.length > 0 ||
-    domainFlows.length > 0 ||
-    entitiesInDomain.length > 0 ||
-    sendsMessages.length > 0 ||
-    receivesMessages.length > 0;
-
   // Diagrams
   const domainDiagrams = domain.data.diagrams || [];
   const diagramNavItems = buildDiagramNavItems(domainDiagrams, context.diagrams);
@@ -223,10 +211,7 @@ export const buildDomainSections = (
     'quick-reference': buildQuickReferenceSection(
       [
         { title: 'Overview', href: buildUrl(`/docs/domains/${domain.data.id}/${domain.data.version}`) },
-        hasResources && {
-          title: 'Domain Resources',
-          href: buildUrl(`/docs/domains/${domain.data.id}/${domain.data.version}/resources`),
-        },
+        buildResourcesLink(context, 'domains', domain.data.id, domain.data.version),
         renderUbiquitousLanguage && {
           title: 'Ubiquitous Language',
           href: buildUrl(`/docs/domains/${domain.data.id}/language`),
@@ -239,31 +224,28 @@ export const buildDomainSections = (
       ].filter(Boolean) as { title: string; href: string }[]
     ),
     documentation: docsSection,
-    architecture: {
-      type: 'group',
-      title: 'Architecture',
-      icon: 'Workflow',
-      pages: [
-        {
-          type: 'item',
-          title: 'Overview',
-          href: buildUrl(`/architecture/domains/${domain.data.id}/${domain.data.version}`),
-        },
-        // The domain's diagram, with levels from the domains it talks to down to
-        // its messages
-        renderVisualiser && {
-          type: 'item',
-          title: 'Diagram',
-          href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
-        },
-        renderEntities &&
-          renderVisualiser && {
-            type: 'item',
-            title: 'Entity Diagram',
-            href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}/entity-map`),
-          },
-      ].filter(Boolean) as ChildRef[],
-    },
+    // Every Architecture link is a visualiser view, so the group is left out when the visualiser is off.
+    architecture: renderVisualiser
+      ? {
+          type: 'group',
+          title: 'Architecture',
+          icon: 'Workflow',
+          pages: [
+            // The domain's diagram, with levels from the domains it talks to down to
+            // its messages
+            {
+              type: 'item',
+              title: 'Diagram',
+              href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
+            },
+            renderEntities && {
+              type: 'item',
+              title: 'Entity Diagram',
+              href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}/entity-map`),
+            },
+          ].filter(Boolean) as ChildRef[],
+        }
+      : null,
     diagrams: hasDiagrams
       ? {
           type: 'group',

package/eventcatalog/src/stores/sidebar-store/builders/flow.ts

@@ -6,6 +6,7 @@ import {
   buildResourceDocsSection,
   shouldRenderSideBarSection,
   buildArchitectureDecisionsSection,
+  buildResourcesLink,
 } from './shared';
 import { isChangelogEnabled } from '@utils/feature';
 import { createVersionedMap, findInMap } from '@utils/collections/util';
@@ -157,6 +158,7 @@ export const buildFlowSections = (flow: CollectionEntry<'flows'>, context: Resou
     'quick-reference': buildQuickReferenceSection(
       [
         { title: 'Overview', href: buildUrl(`/docs/flows/${flow.data.id}/${flow.data.version}`) },
+        buildResourcesLink(context, 'flows', flow.data.id, flow.data.version),
         isChangelogEnabled() &&
           shouldRenderSideBarSection(flow, 'changelog') && {
             title: 'Changelog',

package/eventcatalog/src/stores/sidebar-store/builders/message.ts

@@ -11,6 +11,7 @@ import {
   buildDiagramNavItems,
   buildResourceDocsSection,
   buildArchitectureDecisionsSection,
+  buildResourcesLink,
 } from './shared';
 import { isVisualiserEnabled, isChangelogEnabled } from '@utils/feature';
 import { iconFieldsForResource } from '@utils/icon';
@@ -137,6 +138,7 @@ export const buildMessageSections = (
           title: 'Overview',
           href: buildUrl(`/docs/${collection}/${message.data.id}/${message.data.version}`),
         },
+        buildResourcesLink(context, collection, message.data.id, message.data.version),
         isChangelogEnabled() &&
           shouldRenderSideBarSection(message, 'changelog') && {
             title: 'Changelog',

package/eventcatalog/src/stores/sidebar-store/builders/service.ts

@@ -13,6 +13,7 @@ import {
   buildDiagramNavItems,
   buildResourceDocsSection,
   buildArchitectureDecisionsSection,
+  buildResourcesLink,
 } from './shared';
 import { isVisualiserEnabled, isChangelogEnabled } from '@utils/feature';
 import { pluralizeMessageType } from '@utils/collections/messages';
@@ -98,6 +99,7 @@ export const buildServiceSections = (
   const hasAttachments = service.data.attachments && service.data.attachments.length > 0;
 
   const hasDataStores = dataStoresInService.length > 0;
+
   const resourceGroups = service.data.resourceGroups || [];
   const hasResourceGroups = resourceGroups.length > 0;
 
@@ -126,6 +128,7 @@ export const buildServiceSections = (
     'quick-reference': buildQuickReferenceSection(
       [
         { title: 'Overview', href: buildUrl(docsBasePath) },
+        buildResourcesLink(context, 'services', service.data.id, service.data.version),
         isChangelogEnabled() &&
           shouldRenderSideBarSection(service, 'changelog') && {
             title: 'Changelog',
@@ -134,29 +137,26 @@ export const buildServiceSections = (
       ].filter(Boolean) as { title: string; href: string }[]
     ),
     documentation: docsSection,
-    architecture: {
-      type: 'group',
-      title: 'Architecture',
-      icon: 'Workflow',
-      pages: [
-        {
-          type: 'item',
-          title: 'Overview',
-          href: buildUrl(`/architecture/services/${service.data.id}/${service.data.version}`),
-        },
-        renderVisualiser && {
-          type: 'item',
-          title: 'Diagram',
-          href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}`),
-        },
-        renderVisualiser &&
-          renderEntities && {
-            type: 'item',
-            title: 'Entity Diagram',
-            href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}/entity-map`),
-          },
-      ].filter(Boolean) as ChildRef[],
-    },
+    // Every Architecture link is a visualiser view, so the group is left out when the visualiser is off.
+    architecture: renderVisualiser
+      ? {
+          type: 'group',
+          title: 'Architecture',
+          icon: 'Workflow',
+          pages: [
+            {
+              type: 'item',
+              title: 'Diagram',
+              href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}`),
+            },
+            renderEntities && {
+              type: 'item',
+              title: 'Entity Diagram',
+              href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}/entity-map`),
+            },
+          ].filter(Boolean) as ChildRef[],
+        }
+      : null,
     diagrams: hasDiagrams
       ? {
           type: 'group',

package/eventcatalog/src/stores/sidebar-store/builders/shared.ts

@@ -79,8 +79,21 @@ export type ResourceGroupContext = {
   teams?: CollectionEntry<'teams'>[];
   resourceDocs: ResourceDocEntry[];
   resourceDocCategories: ResourceDocCategoryEntry[];
+  /** `collection:id:version` of every resource with a Resources page (see getResourcesPageKeys). */
+  resourcesPages?: Set<string>;
 };
 
+/** The Quick Reference link to a resource's Resources page, when it has one. */
+export const buildResourcesLink = (
+  context: Pick<ResourceGroupContext, 'resourcesPages'>,
+  collection: string,
+  id: string,
+  version: string
+) =>
+  context.resourcesPages?.has(`${collection}:${id}:${version}`)
+    ? { title: 'Resources', href: buildUrl(`/docs/${collection}/${id}/${version}/resources`) }
+    : false;
+
 export const buildQuickReferenceSection = (items: { title: string; href: string }[]): NavNode => ({
   type: 'group',
   title: 'Quick Reference',