@eventcatalog/core 3.39.4 → 3.39.6

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

@@ -1,11 +1,17 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { DocumentTextIcon, MapIcon } from '@heroicons/react/24/solid';
-import { ArrowDownIcon, ArrowUpIcon, EllipsisVerticalIcon, StarIcon } from '@heroicons/react/24/outline';
+import {
+  ArrowDownIcon,
+  ArrowTopRightOnSquareIcon,
+  ArrowUpIcon,
+  EllipsisVerticalIcon,
+  StarIcon,
+} from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForCollection } from '@utils/collections/icons';
 import { getCollectionTextColorClass } from '@utils/collection-colors';
-import { getBadgeReactStyle } from '@utils/badge-styles';
+import { getBadgeHref, getBadgeReactStyle } from '@utils/badge-styles';
 import { isIconPath, resolveIconUrl } from '@utils/icon';
 import { useStore } from '@nanostores/react';
 import { favoritesStore, toggleFavorite, type FavoriteItem } from '../../../stores/favorites-store';
@@ -15,7 +21,11 @@ import type { TableConfiguration } from '@types';
 const columnHelper = createColumnHelper<DiscoverTableData>();
 
 // Badge cell component (proper React component to use hooks)
-const BadgesCell = ({ badges }: { badges: Array<{ content: string; backgroundColor?: string; textColor?: string }> }) => {
+const BadgesCell = ({
+  badges,
+}: {
+  badges: Array<{ content: string; backgroundColor?: string; textColor?: string; url?: string }>;
+}) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   if (!badges || badges.length === 0) return <span className="text-xs text-[rgb(var(--ec-icon-color))]">-</span>;
@@ -25,16 +35,28 @@ const BadgesCell = ({ badges }: { badges: Array<{ content: string; backgroundCol
 
   return (
     <div className="flex flex-col gap-1 items-start">
-      {visibleItems.map((badge, index) => (
-        <span
-          key={`${badge.content}-${index}`}
-          className="inline-flex items-center px-2 py-0.5 text-[11px] font-normal rounded-md max-w-[140px] truncate border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] bg-transparent"
-          style={getBadgeReactStyle(badge)}
-          title={badge.content}
-        >
-          {badge.content}
-        </span>
-      ))}
+      {visibleItems.map((badge, index) => {
+        const href = getBadgeHref(badge);
+        const className =
+          'inline-flex items-center px-2 py-0.5 text-[11px] font-normal rounded-md max-w-[140px] truncate border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] bg-transparent';
+
+        return href ? (
+          <a
+            key={`${badge.content}-${index}`}
+            href={href}
+            className={className}
+            style={getBadgeReactStyle(badge)}
+            title={badge.content}
+          >
+            <span className="truncate">{badge.content}</span>
+            <ArrowTopRightOnSquareIcon className="ml-1 h-3 w-3 shrink-0 opacity-70" aria-hidden="true" />
+          </a>
+        ) : (
+          <span key={`${badge.content}-${index}`} className={className} style={getBadgeReactStyle(badge)} title={badge.content}>
+            {badge.content}
+          </span>
+        );
+      })}
       {hiddenCount > 0 && (
         <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-[rgb(var(--ec-accent))] hover:underline">
           {isExpanded ? 'less' : `+${hiddenCount}`}

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

@@ -58,6 +58,7 @@ export type TData<T extends TCollectionTypes> = {
       backgroundColor: string;
       textColor: string;
       icon: any; // Where is it defined?
+      url?: string;
     }>;
     // ---------------------------------------------------------------------------
     // Domains

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

@@ -1,6 +1,7 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { useState } from 'react';
-import { getBadgeReactStyle } from '@utils/badge-styles';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
+import { getBadgeHref, getBadgeReactStyle } from '@utils/badge-styles';
 import { filterByBadge } from '../filters/custom-filters';
 import type { TCollectionTypes, TData } from '../Table';
 import type { TableConfiguration } from '@types';
@@ -24,16 +25,28 @@ export const createBadgesColumn = <T extends { data: Pick<TData<U>['data'], 'bad
 
       return (
         <div className="flex flex-wrap gap-1 items-center">
-          {visibleItems.map((badge, index) => (
-            <span
-              key={`${badge.id}-${index}`}
-              className="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md border border-[rgb(var(--ec-accent)/0.5)] text-[rgb(var(--ec-page-text))] bg-transparent"
-              style={getBadgeReactStyle(badge)}
-              title={badge.content}
-            >
-              {badge.content}
-            </span>
-          ))}
+          {visibleItems.map((badge, index) => {
+            const href = getBadgeHref(badge);
+            const className =
+              'inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md border border-[rgb(var(--ec-accent)/0.5)] text-[rgb(var(--ec-page-text))] bg-transparent';
+
+            return href ? (
+              <a
+                key={`${badge.id}-${index}`}
+                href={href}
+                className={className}
+                style={getBadgeReactStyle(badge)}
+                title={badge.content}
+              >
+                <span>{badge.content}</span>
+                <ArrowTopRightOnSquareIcon className="ml-1 h-3 w-3 shrink-0 opacity-70" aria-hidden="true" />
+              </a>
+            ) : (
+              <span key={`${badge.id}-${index}`} className={className} style={getBadgeReactStyle(badge)} title={badge.content}>
+                {badge.content}
+              </span>
+            );
+          })}
           {hiddenCount > 0 && (
             <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-[rgb(var(--ec-accent))] hover:underline">
               {isExpanded ? 'less' : `+${hiddenCount}`}

package/eventcatalog/src/content.config-shared-collections.ts

@@ -6,6 +6,7 @@ export const badge = z.object({
   backgroundColor: z.string(),
   textColor: z.string(),
   icon: z.string().optional(),
+  url: z.string().optional(),
 });
 
 // Create a union type for owners

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -5,6 +5,7 @@ import config from '@config';
 import { AlignLeftIcon, UserIcon, UsersIcon } from 'lucide-react';
 
 import mdxComponents from '@components/MDX/components';
+import Badge from '@components/Badge.astro';
 
 import { getOwner } from '@utils/collections/owners';
 import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
@@ -117,24 +118,7 @@ const editUrl =
                 badges && badges.length > 0 && (
                   <div class="flex flex-wrap gap-3 py-2">
                     {badges.map((badge: any) => {
-                      return (
-                        <a href={badge.url || '#'}>
-                          <span
-                            id={badge.id || ''}
-                            class={`
-                              inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                              bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
-                              text-[rgb(var(--ec-page-text))]
-                              shadow-xs
-                              ${badge.class ? badge.class : ''}
-                            `}
-                          >
-                            {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
-                            {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
-                            <span>{badge.content}</span>
-                          </span>
-                        </a>
-                      );
+                      return <Badge badge={badge} />;
                     })}
                   </div>
                 )