@eventcatalog/core 2.27.0 → 2.28.0

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

@@ -0,0 +1,48 @@
+export interface MessageItem {
+  href: string;
+  label: string;
+  service: string;
+  id: string;
+  direction: 'sends' | 'receives';
+  type: 'command' | 'query' | 'event';
+  data: {
+    name: string;
+  };
+}
+
+export interface ServiceItem {
+  href: string;
+  label: string;
+  name: string;
+  id: string;
+  sends: MessageItem[];
+  receives: MessageItem[];
+}
+
+interface DomainItem {
+  href: string;
+  label: string;
+  id: string;
+  name: string;
+  services: any[];
+}
+
+interface FlowItem {
+  href: string;
+  label: string;
+}
+
+interface Resources {
+  domains?: DomainItem[];
+  services?: ServiceItem[];
+  flows?: FlowItem[];
+  messagesNotInService?: MessageItem[];
+  commands?: MessageItem[];
+  queries?: MessageItem[];
+  events?: MessageItem[];
+}
+
+export interface ListViewSideBarProps {
+  resources: Resources;
+  currentPath: string;
+}

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

@@ -0,0 +1,103 @@
+import { isCollectionVisibleInCatalog } from '@eventcatalog';
+import { buildUrl } from '@utils/url-builder';
+import { getChannels } from '@utils/channels';
+import { getDomains } from '@utils/collections/domains';
+import { getFlows } from '@utils/collections/flows';
+import { getServices } from '@utils/collections/services';
+import { getCommands } from '@utils/commands';
+import { getEvents } from '@utils/events';
+import { getQueries } from '@utils/queries';
+
+export async function getResourcesForNavigation({ currentPath }: { currentPath: string }) {
+  const events = await getEvents({ getAllVersions: false });
+  const commands = await getCommands({ getAllVersions: false });
+  const queries = await getQueries({ getAllVersions: false });
+  const services = await getServices({ getAllVersions: false });
+  const domains = await getDomains({ getAllVersions: false });
+  const channels = await getChannels({ getAllVersions: false });
+  const flows = await getFlows({ getAllVersions: false });
+
+  const messages = [...events, ...commands, ...queries];
+
+  // messages that are not in a service (sends or receives)
+  const messagesNotInService = messages.filter(
+    (message) =>
+      !services.some(
+        (service) =>
+          service.data?.sends?.some((send: any) => send.data.id === message.data.id) ||
+          service.data?.receives?.some((receive: any) => receive.data.id === message.data.id)
+      )
+  );
+
+  const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
+
+  // Just the domains for now.
+  const allDataAsSideNav = [...domains, ...services, ...flows, ...channels].reduce((acc, item) => {
+    const title = item.collection;
+    const group = acc[title] || [];
+
+    const servicesCount = item.collection === 'domains' ? item.data.services?.length || 0 : 0;
+    const sends = item.collection === 'services' ? item.data.sends || null : null;
+    const receives = item.collection === 'services' ? item.data.receives || null : null;
+
+    // Add href to the sends and receives
+    const sendsWithHref = sends?.map((send: any) => ({
+      ...send,
+      href: buildUrl(`/${route}/${send.collection}/${send.data.id}/${send.data.version}`),
+    }));
+    const receivesWithHref = receives?.map((receive: any) => ({
+      ...receive,
+      href: buildUrl(`/${route}/${receive.collection}/${receive.data.id}/${receive.data.version}`),
+    }));
+
+    const navigationItem = {
+      label: item.data.name,
+      version: item.data.version,
+      // items: item.collection === 'users' ? [] : item.headings,
+      visible: isCollectionVisibleInCatalog(item.collection),
+      // @ts-ignore
+      href: item.data.version
+        ? // @ts-ignore
+          buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`)
+        : buildUrl(`/${route}/${item.collection}/${item.data.id}`),
+      collection: item.collection,
+      servicesCount,
+      id: item.data.id,
+      name: item.data.name,
+      services: item.collection === 'domains' ? item.data.services : null,
+      sends: sendsWithHref,
+      receives: receivesWithHref,
+    };
+
+    group.push(navigationItem);
+
+    return {
+      ...acc,
+      [title]: group,
+    };
+  }, {} as any);
+
+  // Add messagesNotInService
+  const messagesNotInServiceAsSideNav = messagesNotInService.map((item) => ({
+    label: item.data.name,
+    version: item.data.version,
+    id: item.data.id,
+    name: item.data.name,
+    href: buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`),
+    collection: item.collection,
+  }));
+
+  const sideNav = {
+    ...(currentPath.includes('visualiser')
+      ? {
+          'bounded context map': [
+            { label: 'Domain map', href: buildUrl('/visualiser/context-map'), collection: 'bounded-context-map' },
+          ],
+        }
+      : {}),
+    ...allDataAsSideNav,
+    messagesNotInService: messagesNotInServiceAsSideNav,
+  };
+
+  return sideNav;
+}

package/eventcatalog/src/components/SideNav/SideNav.astro

@@ -3,29 +3,30 @@ import type { HTMLAttributes } from 'astro/types';
 import config from '@config';
 
 // FlatView
-import CatalogResourcesSideBar from './CatalogResourcesSideBar';
-import { getCatalogResources } from './CatalogResourcesSideBar/getCatalogResources';
+import { getResourcesForNavigation as getListViewResources } from './ListViewSideBar/utils';
 
 // TreeView
 import { SideNavTreeView } from './TreeView';
 import { getTreeView } from './TreeView/getTreeView';
 
+import ListViewSideBar from './ListViewSideBar';
+
 interface Props extends Omit<HTMLAttributes<'div'>, 'children'> {}
 
 const currentPath = Astro.url.pathname;
 
 let props;
 
-const SIDENAV_TYPE = config?.docs?.sidebar?.type ?? 'FLAT_VIEW';
+const SIDENAV_TYPE = config?.docs?.sidebar?.type ?? 'LIST_VIEW';
 
-if (SIDENAV_TYPE === 'FLAT_VIEW') {
-  props = await getCatalogResources({ currentPath });
-} else if (SIDENAV_TYPE === 'TREE_VIEW') {
+if (SIDENAV_TYPE === 'TREE_VIEW') {
   props = getTreeView({ projectDir: process.env.PROJECT_DIR!, currentPath });
+} else if (SIDENAV_TYPE === 'LIST_VIEW') {
+  props = await getListViewResources({ currentPath });
 }
 ---
 
 <div {...Astro.props}>
-  {SIDENAV_TYPE === 'FLAT_VIEW' && <CatalogResourcesSideBar resources={props} currentPath={currentPath} client:load />}
+  {SIDENAV_TYPE === 'LIST_VIEW' && <ListViewSideBar resources={props} currentPath={currentPath} client:only />}
   {SIDENAV_TYPE === 'TREE_VIEW' && <SideNavTreeView client:only transition:persist tree={props} />}
 </div>

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -5,11 +5,11 @@ interface Props {
   description?: string;
 }
 
-import { BookOpenText, Workflow, TableProperties, House, BookUser, MessageSquare, BotMessageSquare } from 'lucide-react';
+import { BookOpenText, Workflow, TableProperties, House, BookUser, MessageSquare, BotMessageSquare, Users } from 'lucide-react';
 import Header from '../components/Header.astro';
 import SEO from '../components/Seo.astro';
 import SideNav from '../components/SideNav/SideNav.astro';
-import '@fontsource/inter';
+// import '@fontsource/inter';
 
 import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/collections/domains';
@@ -66,7 +66,7 @@ const navigationItems = [
     label: 'Documentation',
     icon: BookOpenText,
     href: catalogHasDefaultLandingPageForDocs ? buildUrl('/docs') : getDefaultUrl('docs', '/docs'),
-    current: currentPath.includes('/docs'),
+    current: currentPath.includes('/docs') || currentPath.includes('/architecture/docs/'),
     sidebar: true,
   },
   {
@@ -87,8 +87,8 @@ const navigationItems = [
   },
   {
     id: '/directory',
-    label: 'Directory',
-    icon: BookUser,
+    label: 'Users & Teams',
+    icon: Users,
     href: buildUrl('/directory/users'),
     current: currentPath.includes('/directory'),
     sidebar: false,
@@ -98,7 +98,7 @@ const navigationItems = [
     label: 'Architecture',
     icon: BookUser,
     href: buildUrl('/architecture/domains'),
-    current: currentPath.includes('/architecture'),
+    current: currentPath.includes('/architecture/'),
     sidebar: false,
     hidden: true,
   },
@@ -175,7 +175,7 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
 
         <SideNav
           id="sidebar"
-          class={`sidebar-transition h-content  overflow-y-auto bg-white  border-r border-gray-100 w-60 ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
+          class={`sidebar-transition h-content  overflow-y-auto bg-white  border-r border-gray-100 w-80 ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
         />
       </aside>
       <main

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

@@ -1,25 +1,5 @@
 ---
-import { getDomains, getMessagesForDomain } from '@utils/collections/domains';
-import { getServices } from '@utils/collections/services';
-import { getMessages } from '@utils/messages';
-import type { ExtendedDomain } from '@components/Grids/DomainGrid';
-import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import DomainGrid from '@components/Grids/DomainGrid';
-import ServiceGrid from '@components/Grids/ServiceGrid';
-import MessageGrid from '@components/Grids/MessageGrid';
-
-import type { CollectionEntry } from 'astro:content';
-import type { CollectionMessageTypes } from '@types';
-
-import { ClientRouter, fade } from 'astro:transitions';
-// Define valid types and their corresponding data fetchers
-const VALID_TYPES = ['domains', 'services', 'messages'] as const;
-type ValidType = (typeof VALID_TYPES)[number];
-
-interface Service extends CollectionEntry<'services'> {
-  sends: CollectionEntry<'events' | 'commands' | 'queries'>[];
-  receives: CollectionEntry<'events' | 'commands' | 'queries'>[];
-}
+import Architecture from '../architecture.astro';
 
 export async function getStaticPaths() {
   const VALID_TYPES = ['domains', 'services', 'messages'] as const;
@@ -28,61 +8,7 @@ export async function getStaticPaths() {
   }));
 }
 
-const { type } = Astro.params as { type: ValidType };
-
-// Get data based on type
-let items: ExtendedDomain[] | Service[] | CollectionEntry<'commands'>[] | CollectionEntry<CollectionMessageTypes>[] = [];
-
-if (type === 'domains') {
-  const domains = await getDomains({ getAllVersions: false });
-
-  // Get messages for each domain
-  items = await Promise.all(
-    domains.map(async (domain) => {
-      const messages = await getMessagesForDomain(domain);
-      // @ts-ignore we have to remove markdown information, as it's all send to the astro components. This reduced the page size.
-      return {
-        ...domain,
-        sends: messages.sends.map((s) => ({ ...s, body: undefined, catalog: undefined })),
-        receives: messages.receives.map((r) => ({ ...r, body: undefined, catalog: undefined })),
-        catalog: undefined,
-        body: undefined,
-      } as ExtendedDomain;
-    })
-  );
-} else if (type === 'services') {
-  const services = await getServices({ getAllVersions: false });
-  let filteredServices = services.map((s) => {
-    // @ts-ignore we have to remove markdown information, as it's all send to the astro components. This reduced the page size.
-    return {
-      ...s,
-      sends: (s.data.sends || []).map((s) => ({ ...s, body: undefined, catalog: undefined })),
-      receives: (s.data.receives || []).map((r) => ({ ...r, body: undefined, catalog: undefined })),
-      catalog: undefined,
-      body: undefined,
-    } as Service;
-  }) as unknown as Service[];
-  items = filteredServices;
-} else if (type === 'messages') {
-  const { events, commands, queries } = await getMessages({ getAllVersions: false });
-  const messages = [...events, ...commands, ...queries];
-  items = messages.map((m) => ({
-    ...m,
-    body: undefined,
-    catalog: undefined,
-  })) as unknown as CollectionEntry<CollectionMessageTypes>[];
-}
+const { type } = Astro.params;
 ---
 
-<VerticalSideBarLayout title={'EventCatalog'}>
-  <div class="bg-white min-h-screen">
-    <div class="max-w-[90em] mx-auto">
-      <div class="px-6 py-6" transition:animate={fade({ duration: '0.4s' })}>
-        {type === 'domains' && <DomainGrid domains={items as ExtendedDomain[]} client:load />}
-        {type === 'services' && <ServiceGrid services={items as unknown as Service[]} client:load />}
-        {type === 'messages' && <MessageGrid messages={items as CollectionEntry<CollectionMessageTypes>[]} client:load />}
-      </div>
-    </div>
-    <ClientRouter />
-  </div>
-</VerticalSideBarLayout>
+<Architecture type={type} />

package/eventcatalog/src/pages/architecture/architecture.astro

@@ -0,0 +1,81 @@
+---
+import { getDomains, getMessagesForDomain } from '@utils/collections/domains';
+import { getServices } from '@utils/collections/services';
+import { getMessages } from '@utils/messages';
+import type { ExtendedDomain } from '@components/Grids/DomainGrid';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import DomainGrid from '@components/Grids/DomainGrid';
+import ServiceGrid from '@components/Grids/ServiceGrid';
+import MessageGrid from '@components/Grids/MessageGrid';
+
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionMessageTypes } from '@types';
+
+import { ClientRouter, fade } from 'astro:transitions';
+// Define valid types and their corresponding data fetchers
+const VALID_TYPES = ['domains', 'services', 'messages'] as const;
+type ValidType = (typeof VALID_TYPES)[number];
+
+interface Service extends CollectionEntry<'services'> {
+  sends: CollectionEntry<'events' | 'commands' | 'queries'>[];
+  receives: CollectionEntry<'events' | 'commands' | 'queries'>[];
+}
+
+const { type } = Astro.props as { type: ValidType };
+
+// Get data based on type
+let items: ExtendedDomain[] | Service[] | CollectionEntry<'commands'>[] | CollectionEntry<CollectionMessageTypes>[] = [];
+
+if (type === 'domains') {
+  const domains = await getDomains({ getAllVersions: false });
+
+  // Get messages for each domain
+  items = await Promise.all(
+    domains.map(async (domain) => {
+      const messages = await getMessagesForDomain(domain);
+      // @ts-ignore we have to remove markdown information, as it's all send to the astro components. This reduced the page size.
+      return {
+        ...domain,
+        sends: messages.sends.map((s) => ({ ...s, body: undefined, catalog: undefined })),
+        receives: messages.receives.map((r) => ({ ...r, body: undefined, catalog: undefined })),
+        catalog: undefined,
+        body: undefined,
+      } as ExtendedDomain;
+    })
+  );
+} else if (type === 'services') {
+  const services = await getServices({ getAllVersions: false });
+  let filteredServices = services.map((s) => {
+    // @ts-ignore we have to remove markdown information, as it's all send to the astro components. This reduced the page size.
+    return {
+      ...s,
+      sends: (s.data.sends || []).map((s) => ({ ...s, body: undefined, catalog: undefined })),
+      receives: (s.data.receives || []).map((r) => ({ ...r, body: undefined, catalog: undefined })),
+      catalog: undefined,
+      body: undefined,
+    } as Service;
+  }) as unknown as Service[];
+  items = filteredServices;
+} else if (type === 'messages') {
+  const { events, commands, queries } = await getMessages({ getAllVersions: false });
+  const messages = [...events, ...commands, ...queries];
+  items = messages.map((m) => ({
+    ...m,
+    body: undefined,
+    catalog: undefined,
+  })) as unknown as CollectionEntry<CollectionMessageTypes>[];
+}
+---
+
+<VerticalSideBarLayout title={'EventCatalog'}>
+  <div class="bg-white min-h-screen">
+    <div class="max-w-[90em] mx-auto">
+      <div class="px-6 py-6" transition:animate={fade({ duration: '0.4s' })}>
+        {type === 'domains' && <DomainGrid domains={items as ExtendedDomain[]} client:load />}
+        {type === 'services' && <ServiceGrid services={items as unknown as Service[]} client:load />}
+        {type === 'messages' && <MessageGrid messages={items as CollectionEntry<CollectionMessageTypes>[]} client:load />}
+      </div>
+    </div>
+    <ClientRouter />
+  </div>
+</VerticalSideBarLayout>

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

@@ -0,0 +1,14 @@
+---
+import Architecture from '../../architecture.astro';
+
+export async function getStaticPaths() {
+  const VALID_TYPES = ['domains', 'services', 'messages'] as const;
+  return VALID_TYPES.map((type) => ({
+    params: { type },
+  }));
+}
+
+const { type } = Astro.params;
+---
+
+<Architecture type={type} />

package/eventcatalog/src/pages/index.astro

@@ -133,7 +133,7 @@ const topTiles = [
     <main class="container px-8 lg:px-8 mx-auto py-8 max-w-[80em]">
       <div class="mb-12">
         <h1 class="text-4xl font-semibold mb-4 text-gray-900 font-inter">
-          {config?.organizationName || 'EventCatalog'} Documentation
+          {config?.organizationName || 'EventCatalog'}
         </h1>
         <p class="text-base mb-0 text-gray-600 max-w-3xl">
           {config.tagline || 'Comprehensive event-driven architecture documentation covering events, services, domains.'}

package/package.json

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

package/eventcatalog/src/components/SideNav/CatalogResourcesSideBar/getCatalogResources.ts

@@ -1,65 +0,0 @@
-import { isCollectionVisibleInCatalog } from '@eventcatalog';
-import { buildUrl } from '@utils/url-builder';
-import { getChannels } from '@utils/channels';
-import { getDomains } from '@utils/collections/domains';
-import { getFlows } from '@utils/collections/flows';
-import { getServices } from '@utils/collections/services';
-import { getCommands } from '@utils/commands';
-import { getEvents } from '@utils/events';
-import { getQueries } from '@utils/queries';
-import { getTeams } from '@utils/teams';
-import { getUsers } from '@utils/users';
-
-export async function getCatalogResources({ currentPath }: { currentPath: string }) {
-  const events = await getEvents({ getAllVersions: false });
-  const commands = await getCommands({ getAllVersions: false });
-  const queries = await getQueries({ getAllVersions: false });
-  const services = await getServices({ getAllVersions: false });
-  const domains = await getDomains({ getAllVersions: false });
-  const channels = await getChannels({ getAllVersions: false });
-  const flows = await getFlows({ getAllVersions: false });
-
-  const messages = [...events, ...commands, ...queries];
-
-  // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
-  const allData = [...domains, ...services, ...messages, ...channels, ...flows];
-
-  const allDataAsSideNav = allData.reduce((acc, item) => {
-    const title = item.collection;
-    const group = acc[title] || [];
-    const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
-
-    const navigationItem = {
-      label: item.data.name,
-      version: item.data.version,
-      // items: item.collection === 'users' ? [] : item.headings,
-      visible: isCollectionVisibleInCatalog(item.collection),
-      // @ts-ignore
-      href: item.data.version
-        ? // @ts-ignore
-          buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`)
-        : buildUrl(`/${route}/${item.collection}/${item.data.id}`),
-      collection: item.collection,
-    };
-
-    group.push(navigationItem);
-
-    return {
-      ...acc,
-      [title]: group,
-    };
-  }, {} as any);
-
-  const sideNav = {
-    ...(currentPath.includes('visualiser')
-      ? {
-          'bounded context map': [
-            { label: 'Domain map', href: buildUrl('/visualiser/context-map'), collection: 'bounded-context-map' },
-          ],
-        }
-      : {}),
-    ...allDataAsSideNav,
-  };
-
-  return sideNav;
-}

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

@@ -1,138 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import debounce from 'lodash.debounce';
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
-import './styles.css';
-import { getIconForCollection as getIconForCollectionOriginal } from '@utils/collections/icons';
-
-const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
-
-interface CatalogResourcesSideBarProps {
-  resources: any;
-  currentPath: string;
-}
-
-const CatalogResourcesSideBar: React.FC<CatalogResourcesSideBarProps> = ({ resources, currentPath }) => {
-  if (typeof window === 'undefined') {
-    return null;
-  }
-
-  const [data, setData] = useState(resources);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>(() => {
-    if (typeof window !== 'undefined') {
-      const saved = window.localStorage.getItem(STORAGE_KEY);
-      setIsInitialized(true);
-      return saved ? JSON.parse(saved) : {};
-    }
-    return {};
-  });
-  const decodedCurrentPath = decodeURIComponent(currentPath);
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsedGroups));
-    }
-  }, [collapsedGroups]);
-
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
-  };
-
-  const debouncedHandleSearch = useMemo(() => debounce(handleSearch, 300), []);
-
-  useEffect(() => {
-    return () => {
-      debouncedHandleSearch.cancel();
-    };
-  }, [debouncedHandleSearch]);
-
-  const toggleGroupCollapse = (group: string) => {
-    setCollapsedGroups((prev) => ({
-      ...prev,
-      [group]: !prev[group],
-    }));
-  };
-
-  const filteredData = useMemo(() => {
-    if (!searchQuery) return data;
-
-    const lowercasedQuery = searchQuery.toLowerCase();
-    const filterCollection = (collection: any[]) =>
-      collection.filter((item) => item.label.toLowerCase().includes(lowercasedQuery));
-
-    return Object.keys(data).reduce((acc, key) => {
-      const filteredCollection = filterCollection(data[key]);
-      if (filteredCollection.length > 0) {
-        acc[key] = filteredCollection;
-      }
-      return acc;
-    }, {} as any);
-  }, [searchQuery, data]);
-
-  const getIconForCollection = useMemo(() => getIconForCollectionOriginal, []);
-
-  if (!isInitialized) return null;
-
-  return (
-    <nav className="space-y-6 text-black px-5 py-4 ">
-      <div className="space-y-2">
-        <div className="mb-4 px-1">
-          <input
-            type="text"
-            placeholder="Filter catalog..."
-            className="w-full font-light px-3 py-1 text-sm text-gray-600 border border-purple-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
-            onChange={debouncedHandleSearch}
-          />
-        </div>
-
-        {Object.keys(filteredData).length === 0 ? (
-          <div className="px-2 text-gray-400 dark:text-gray-200 text-sm">No results found</div>
-        ) : (
-          Object.keys(filteredData).map((key) => {
-            const collection = filteredData[key];
-            if (collection[0] && collection[0].visible === false) return null;
-            const isCollapsed = collapsedGroups[key];
-
-            return (
-              <ul className="w-full space-y-1.5 pb-2 pl-1 text-black" key={key}>
-                <li
-                  className="font capitalize cursor-pointer flex items-center ml-1 text-[14px]"
-                  onClick={() => toggleGroupCollapse(key)}
-                >
-                  <span className="">{`${key} (${collection.length})`}</span>
-                  <span className="ml-2 block">
-                    {isCollapsed ? <ChevronDownIcon className="w-3 h-3" /> : <ChevronUpIcon className="w-3 h-3" />}
-                  </span>
-                </li>
-                {!isCollapsed &&
-                  collection.map((item: any) => {
-                    const Icon = getIconForCollection(item.collection);
-                    return (
-                      <li
-                        className={`w-full has-tooltip text-md xl:text-sm space-y-2 scroll-m-20 rounded-md text-black hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white    ${decodedCurrentPath.includes(item.href) ? ' bg-gradient-to-l from-purple-500 to-purple-700  font-normal text-white ' : 'font-thin'}`}
-                        id={item.href}
-                        key={item.href}
-                      >
-                        <a className={`flex px-1 justify-start items-center w-full rounded-md  `} href={`${item.href}`}>
-                          <Icon className="w-3 mr-2" />
-                          <span className="block truncate  !whitespace-normal">{item.label}</span>
-                          {/* {item.label.length > 2 && (
-                            <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
-                              {item.label}
-                            </span>
-                          )} */}
-                        </a>
-                      </li>
-                    );
-                  })}
-              </ul>
-            );
-          })
-        )}
-      </div>
-    </nav>
-  );
-};
-
-export default CatalogResourcesSideBar;

package/eventcatalog/src/components/SideNav/CatalogResourcesSideBar/styles.css

@@ -1,8 +0,0 @@
-.tooltip {
-  visibility: hidden;
-  position: absolute;
-}
-.has-tooltip:hover .tooltip {
-  visibility: visible;
-  z-index: 100;
-}