@eventcatalog/core 2.48.1 → 2.48.3

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.48.1";
+var version = "2.48.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-M35UFAGG.js";
-import "../chunk-WAVFA46U.js";
+} from "../chunk-BPCESQRH.js";
+import "../chunk-6GN2GDPD.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.48.1";
+var version = "2.48.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-ZI5ZP7I2.js";
-import "../chunk-M35UFAGG.js";
-import "../chunk-WAVFA46U.js";
+} from "../chunk-UFBO6R65.js";
+import "../chunk-BPCESQRH.js";
+import "../chunk-6GN2GDPD.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-WAVFA46U.js → chunk-6GN2GDPD.js}

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

package/dist/{chunk-M35UFAGG.js → chunk-BPCESQRH.js}

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

package/dist/{chunk-ZI5ZP7I2.js → chunk-UFBO6R65.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-M35UFAGG.js";
+} from "./chunk-BPCESQRH.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-WAVFA46U.js";
+} from "./chunk-6GN2GDPD.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.48.1";
+var version = "2.48.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.config.d.cts

@@ -101,6 +101,12 @@ interface Config {
             renderMode?: 'flat' | 'single';
         };
     };
+    environments?: {
+        name: string;
+        url: string;
+        description?: string;
+        shortName?: string;
+    }[];
 }
 
 export type { Config, SideBarConfig };

package/dist/eventcatalog.config.d.ts

@@ -101,6 +101,12 @@ interface Config {
             renderMode?: 'flat' | 'single';
         };
     };
+    environments?: {
+        name: string;
+        url: string;
+        description?: string;
+        shortName?: string;
+    }[];
 }
 
 export type { Config, SideBarConfig };

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-XE6PFSH5.js";
 import {
   log_build_default
-} from "./chunk-ZI5ZP7I2.js";
-import "./chunk-M35UFAGG.js";
+} from "./chunk-UFBO6R65.js";
+import "./chunk-BPCESQRH.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-LDBRNJIL.js";
 import {
   VERSION
-} from "./chunk-WAVFA46U.js";
+} from "./chunk-6GN2GDPD.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

package/eventcatalog/src/components/EnvironmentDropdown.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+interface Environment {
+  name: string;
+  url: string;
+  description?: string;
+  shortName?: string;
+}
+
+interface EnvironmentDropdownProps {
+  environments: Environment[];
+}
+
+export const EnvironmentDropdown: React.FC<EnvironmentDropdownProps> = ({ environments }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentEnvironment, setCurrentEnvironment] = useState<Environment | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Check if current URL matches any environment
+    const currentUrl = window.location.origin;
+    const matchedEnv = environments.find((env) => {
+      // Normalize URLs for comparison
+      const envUrl = new URL(env.url).origin;
+      return envUrl === currentUrl;
+    });
+    setCurrentEnvironment(matchedEnv || null);
+  }, [environments]);
+
+  useEffect(() => {
+    // Handle click outside
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    // Handle escape key
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('click', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const toggleDropdown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={toggleDropdown}
+        className="flex items-center space-x-1 text-sm font-medium text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 rounded-md px-3 py-2"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+          />
+        </svg>
+        <span>
+          Environments
+          {currentEnvironment && (
+            <span className="font-normal"> ({currentEnvironment.shortName || currentEnvironment.name})</span>
+          )}
+        </span>
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      <div
+        className={`${isOpen ? '' : 'hidden'} absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-100 overflow-hidden z-20`}
+      >
+        {environments.map((env) => {
+          const isCurrentEnv = currentEnvironment?.name === env.name;
+
+          return (
+            <a
+              key={env.name}
+              href={env.url}
+              onClick={(e) => {
+                e.preventDefault();
+                // Construct the full URL with the current path when clicked
+                const currentPath = window.location.pathname + window.location.search + window.location.hash;
+                const targetUrl = new URL(env.url);
+                targetUrl.pathname = currentPath;
+                window.location.href = targetUrl.toString();
+              }}
+              className={`block px-4 py-3 text-sm transition-colors border-b border-gray-50 last:border-b-0 ${
+                isCurrentEnv ? 'bg-purple-50 text-purple-700 hover:bg-purple-100' : 'text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className={`font-medium ${isCurrentEnv ? 'text-purple-700' : ''}`}>{env.name}</div>
+                  {env.description && (
+                    <div className={`text-xs font-light mt-1 ${isCurrentEnv ? 'text-purple-600' : 'text-gray-500'}`}>
+                      {env.description}
+                    </div>
+                  )}
+                </div>
+                {isCurrentEnv && (
+                  <svg className="w-4 h-4 text-purple-600 flex-shrink-0 ml-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                )}
+              </div>
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/eventcatalog/src/components/Header.astro

@@ -5,6 +5,7 @@ import { buildUrl } from '@utils/url-builder';
 import { showEventCatalogBranding, showCustomBranding } from '@utils/feature';
 import { getSession } from 'auth-astro/server';
 import { isAuthEnabled, isSSR } from '@utils/feature';
+import { EnvironmentDropdown } from './EnvironmentDropdown';
 
 let session = null;
 if (isAuthEnabled()) {
@@ -41,7 +42,10 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
       <div class="hidden md:block w-3/12">
         {
           session ? (
-            <div class="flex justify-end pr-2">
+            <div class="flex items-center space-x-4 justify-end pr-2">
+              {catalog.environments && catalog.environments.length > 0 && (
+                <EnvironmentDropdown environments={catalog.environments} client:load />
+              )}
               <div class="relative">
                 <button
                   id="profile-menu-button"
@@ -89,6 +93,9 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
           ) : (
             <>
               <div class="flex items-center space-x-4 justify-end pr-2">
+                {catalog.environments && catalog.environments.length > 0 && (
+                  <EnvironmentDropdown environments={catalog.environments} client:load />
+                )}
                 {isAuthEnabled() && (
                   <button
                     id="okta-signin-btn"

package/eventcatalog/src/components/SideNav/ListViewSideBar/components/MessageList.tsx

@@ -61,6 +61,7 @@ const MessageList: React.FC<MessageListProps> = ({ messages, decodedCurrentPath,
         >
           <span className="truncate">
             <HighlightedText text={message.data?.sidebar?.label || message.data.name} searchTerm={searchTerm} />
+            <span className="text-xs text-gray-400">{message.data.draft ? ' (DRAFT)' : ''}</span>
           </span>
           <span
             className={`ml-2 text-[10px]  flex items-center gap-1 font-medium px-2 uppercase py-0.5 rounded ${getMessageColorByLabelOrCollection(message.collection, message.data?.sidebar?.badge)}`}

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

@@ -91,6 +91,7 @@ const ServiceItem = React.memo(
           >
             <span className="truncate text-xs font-bold">
               <HighlightedText text={item.label} searchTerm={searchTerm} />
+              <span className="text-xs text-gray-400">{item.draft ? ' (DRAFT)' : ''}</span>
             </span>
             <span className="text-purple-600 ml-2 text-[10px] font-medium bg-purple-50 px-2 py-0.5 rounded">SERVICE</span>
           </button>

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

@@ -24,6 +24,7 @@ export interface ServiceItem {
   name: string;
   id: string;
   version: string;
+  draft: boolean | { title?: string; message: string };
   sends: MessageItem[];
   receives: MessageItem[];
   entities: EntityItem[];

package/eventcatalog/src/components/SideNav/ListViewSideBar/utils.ts

@@ -59,6 +59,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
         name: send.data.name,
         sidebar: send.data.sidebar,
         aggregateRoot: send?.data?.aggregateRoot,
+        draft: send.data.draft,
       },
       collection: send.collection,
       href: buildUrl(`/${route}/${send.collection}/${send.data.id}/${send.data.version}`),
@@ -69,6 +70,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
         name: receive.data.name,
         sidebar: receive.data.sidebar,
         aggregateRoot: receive?.data?.aggregateRoot,
+        draft: receive.data.draft,
       },
       collection: receive.collection,
       href: buildUrl(`/${route}/${receive.collection}/${receive.data.id}/${receive.data.version}`),
@@ -79,6 +81,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
         name: entity.data.name,
         sidebar: entity.data.sidebar,
         aggregateRoot: entity?.data?.aggregateRoot,
+        draft: entity.data.draft,
       },
       collection: entity.collection,
       href: buildUrl(`/${route}/${entity.collection}/${entity.data.id}/${entity.data.version}`),
@@ -103,6 +106,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
       servicesCount,
       id: item.data.id,
       name: item.data.name,
+      draft: item.data.draft,
       services: isCollectionDomain ? stripCollection(item.data.services) : null,
       domains: isCollectionDomain ? stripCollection(item.data.domains) : null,
       sends: sendsWithHref,
@@ -127,6 +131,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
     version: item.data.version,
     id: item.data.id,
     name: item.data.name,
+    draft: item.data.draft,
     href: buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`),
     collection: item.collection,
   }));

package/eventcatalog/src/components/Tables/Table.tsx

@@ -48,6 +48,7 @@ export type TData<T extends TCollectionTypes> = {
     summary: string;
     version: string;
     latestVersion?: string; // Defined on getter collection utility
+    draft?: boolean | { title?: string; message: string }; // Draft property from base schema
     badges?: Array<{
       id: string; // Where is it defined?
       content: string;
@@ -124,13 +125,14 @@ export const Table = <T extends TCollectionTypes>({
   collection,
   mode = 'simple',
   checkboxLatestId,
+  checkboxDraftsId,
 }: {
   data: TData<T>[];
   collection: T;
   checkboxLatestId: string;
+  checkboxDraftsId: string;
   mode?: 'simple' | 'full';
 }) => {
-  const [data, _setData] = useState(initialData);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
   useEffect(() => {
@@ -142,11 +144,13 @@ export const Table = <T extends TCollectionTypes>({
   }, []);
 
   const [showOnlyLatest, setShowOnlyLatest] = useState(true);
+  const [onlyShowDrafts, setOnlyShowDrafts] = useState(false);
 
   useEffect(() => {
     const checkbox = document.getElementById(checkboxLatestId);
     function handleChange(evt: Event) {
-      setShowOnlyLatest((evt.target as HTMLInputElement).checked);
+      const checked = (evt.target as HTMLInputElement).checked;
+      setShowOnlyLatest(checked);
     }
 
     checkbox?.addEventListener('change', handleChange);
@@ -154,10 +158,47 @@ export const Table = <T extends TCollectionTypes>({
     return () => checkbox?.removeEventListener('change', handleChange);
   }, [checkboxLatestId]);
 
+  useEffect(() => {
+    const checkbox = document.getElementById(checkboxDraftsId);
+    function handleChange(evt: Event) {
+      const checked = (evt.target as HTMLInputElement).checked;
+      setOnlyShowDrafts(checked);
+    }
+
+    checkbox?.addEventListener('change', handleChange);
+
+    return () => checkbox?.removeEventListener('change', handleChange);
+  }, [checkboxDraftsId]);
+
+  // Filter data based on checkbox states
+  const filteredData = useMemo(() => {
+    return initialData.filter((row) => {
+      // Check if item is a draft
+      const isDraft = row.data.draft === true || (typeof row.data.draft === 'object' && row.data.draft !== null);
+
+      // If "Only show drafts" is enabled, show only drafts
+      if (onlyShowDrafts && !isDraft) {
+        return false;
+      }
+
+      // If "Only show drafts" is enabled, don't apply other filters
+      if (onlyShowDrafts) {
+        return true;
+      }
+
+      // Check latest version filter (only when not showing only drafts)
+      if (showOnlyLatest) {
+        return isSameVersion(row.data.version, row.data.latestVersion);
+      }
+
+      return true;
+    });
+  }, [initialData, showOnlyLatest, onlyShowDrafts]);
+
   const columns = useMemo(() => getColumnsByCollection(collection), [collection]);
 
   const table = useReactTable({
-    data,
+    data: filteredData,
     columns,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
@@ -168,15 +209,6 @@ export const Table = <T extends TCollectionTypes>({
     getPaginationRowModel: getPaginationRowModel(),
     state: {
       columnFilters,
-      globalFilter: showOnlyLatest,
-    },
-    onGlobalFilterChange: setShowOnlyLatest,
-    globalFilterFn: (row, _columnId, showOnlyLatest: boolean) => {
-      if (showOnlyLatest) {
-        return isSameVersion(row.original.data.version, row.original.data.latestVersion);
-      }
-
-      return true;
     },
   });
 

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

@@ -43,7 +43,11 @@ export const columns = () => [
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
-    cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
+    cell: (info) => (
+      <span className="font-light ">
+        {info.renderValue()} {info.row.original.data.draft ? ' (Draft)' : ''}
+      </span>
+    ),
     footer: (info) => info.column.id,
     meta: {
       showFilter: false,

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

@@ -60,7 +60,11 @@ export const columns = () => [
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
-    cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
+    cell: (info) => (
+      <span className="font-light ">
+        {info.renderValue()} {info.row.original.data.draft ? ' (Draft)' : ''}
+      </span>
+    ),
     footer: (info) => info.column.id,
     meta: {
       showFilter: false,

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

@@ -44,7 +44,11 @@ export const columns = () => [
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
-    cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
+    cell: (info) => (
+      <span className="font-light ">
+        {info.renderValue()} {info.row.original.data.draft ? ' (Draft)' : ''}
+      </span>
+    ),
     footer: (info) => info.column.id,
     meta: {
       showFilter: false,

package/eventcatalog/src/content.config.ts

@@ -73,6 +73,7 @@ const baseSchema = z.object({
   name: z.string(),
   summary: z.string().optional(),
   version: z.string(),
+  draft: z.union([z.boolean(), z.object({ title: z.string().optional(), message: z.string() })]).optional(),
   badges: z.array(badge).optional(),
   owners: z.array(ownerReference).optional(),
   schemaPath: z.string().optional(),

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -31,6 +31,7 @@ const { title, subtitle, data, type } = Astro.props;
 const currentPath = Astro.url.pathname;
 
 const checkboxLatestId = 'latest-only';
+const checkboxDraftsId = 'show-drafts';
 
 const tabs = [
   {
@@ -117,14 +118,25 @@ const tabs = [
             <h1 class="text-4xl font-semibold text-gray-900 capitalize">{title}</h1>
             <p class="text-md text-gray-700">{subtitle}</p>
           </div>
-          <div class="p-4 border border-gray-200 rounded-md">
-            <Checkbox id={checkboxLatestId} name={checkboxLatestId} label="Show latest version only" checked />
+          <div class="flex gap-4">
+            <div class="p-4 border border-gray-200 rounded-md">
+              <Checkbox id={checkboxLatestId} name={checkboxLatestId} label="Show latest version only" checked />
+            </div>
+            <div class="p-4 border border-gray-200 rounded-md">
+              <Checkbox id={checkboxDraftsId} name={checkboxDraftsId} label="Show drafts only" />
+            </div>
           </div>
         </div>
         <div class="mt-4 flow-root">
           <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div class="inline-block min-w-full align-middle sm:px-6 lg:px-8">
-              <Table checkboxLatestId={checkboxLatestId} data={data} collection={type} client:load />
+              <Table
+                checkboxLatestId={checkboxLatestId}
+                checkboxDraftsId={checkboxDraftsId}
+                data={data}
+                collection={type}
+                client:load
+              />
             </div>
           </div>
         </div>

package/eventcatalog/src/pages/discover/[type]/index.astro

@@ -34,6 +34,7 @@ function mapToItem(i: any) {
           summary: d.data?.summary,
           version: d.data.version,
           latestVersion: d.data?.latestVersion,
+          draft: d.data?.draft,
           badges: d.data?.badges,
           // @ts-ignore
           consumers: d.data?.consumers?.map(mapToItem) ?? [],

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

@@ -278,6 +278,21 @@ nodeGraphs.push({
                 </div>
               )
             }
+
+            {
+              props.data.draft && (
+                <Admonition type="warning" title={props.data?.draft?.title || `Draft ${friendlyCollectionName}`}>
+                  <div>
+                    {!props.data.draft.message && (
+                      <p>This resource has been marked as a draft and may still be under development.</p>
+                    )}
+                    {props.data.draft.message && (
+                      <div class="prose prose-sm max-w-none" set:html={marked.parse(props.data.draft.message)} />
+                    )}
+                  </div>
+                </Admonition>
+              )
+            }
           </div>
         </div>
 

package/package.json

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