feat(core): added ability to filter by badges (#1004)

* feat(core): added ability to filter by badges * Create sharp-timers-agree.md
event-catalog · Dec 6, 2024 · ff449d7 · ff449d7
1 parent a907d96
commit ff449d7
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 28 deletions.
diff --git a/.changeset/sharp-timers-agree.md b/.changeset/sharp-timers-agree.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+feat(core): added ability to filter by badges
diff --git a/eventcatalog/src/components/SideBars/CatalogResourcesSideBar/index.tsx b/eventcatalog/src/components/SideBars/CatalogResourcesSideBar/index.tsx
@@ -6,7 +6,16 @@ import { getIconForCollection as getIconForCollectionOriginal } from '@utils/col
 
 const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
 
-const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
+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);

diff --git a/eventcatalog/src/components/Tables/Table.tsx b/eventcatalog/src/components/Tables/Table.tsx
@@ -21,7 +21,7 @@ import type { CollectionTypes } from '@types';
 declare module '@tanstack/react-table' {
   // @ts-ignore
   interface ColumnMeta<TData extends RowData, TValue> {
-    filterVariant?: 'collection' | 'name';
+    filterVariant?: 'collection' | 'name' | 'badges';
     collectionFilterKey?: string;
     showFilter?: boolean;
     className?: string;
@@ -211,6 +211,16 @@ function Filter({ column }: { column: Column<any, unknown> }) {
 
       return uniqueItemsInList.sort().slice(0, 2000);
     }
+    if (filterVariant === 'badges') {
+      const allBadges = column.getFacetedUniqueValues().keys();
+      // join all badges into a single array
+      const allBadgesArray = Array.from(allBadges)
+        .flat()
+        .filter((b) => !!b);
+      const allBadgesString = allBadgesArray.map((badge) => badge.content);
+      const uniqueBadges = Array.from(new Set(allBadgesString));
+      return uniqueBadges.sort().slice(0, 2000);
+    }
     return Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 2000);
   }, [column.getFacetedUniqueValues(), filterVariant]);
 

diff --git a/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx b/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx
@@ -2,8 +2,10 @@ import { ServerIcon } from '@heroicons/react/20/solid';
 import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
-import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByBadge, filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
+import { Tag } from 'lucide-react';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'domains'>>();
 
@@ -40,14 +42,6 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
-  // columnHelper.accessor('data.version', {
-  //   header: () => <span>Version</span>,
-  //   cell: (info) => {
-  //     const service = info.row.original;
-  //     return <div className="text-left font-light">{`v${info.getValue()} ${service.data.latestVersion === service.data.version ? '(latest)': ''}`}</div>
-  //   },
-  //   footer: (info) => info.column.id,
-  // }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
@@ -96,9 +90,9 @@ export const columns = () => [
         </ul>
       );
     },
-    // footer: (info) => info.column.id,
     filterFn: filterCollectionByName('services'),
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

diff --git a/eventcatalog/src/components/Tables/columns/FlowTableColumns.tsx b/eventcatalog/src/components/Tables/columns/FlowTableColumns.tsx
@@ -1,10 +1,9 @@
-import { ServerIcon } from '@heroicons/react/20/solid';
-import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
-import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { QueueListIcon } from '@heroicons/react/24/solid';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'flows'>>();
 
@@ -61,6 +60,7 @@ export const columns = () => [
       className: 'max-w-md',
     },
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

diff --git a/eventcatalog/src/components/Tables/columns/MessageTableColumns.tsx b/eventcatalog/src/components/Tables/columns/MessageTableColumns.tsx
@@ -3,8 +3,9 @@ import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionMessageTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
-import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByName, filterCollectionByName, filterByBadge } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<CollectionMessageTypes>>();
 
@@ -55,14 +56,15 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
+
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
     cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
     footer: (info) => info.column.id,
     meta: {
       showFilter: false,
-      className: 'max-w-md',
+      className: 'max-w-[200px]',
     },
   }),
 
@@ -145,6 +147,7 @@ export const columns = () => [
     footer: (info) => info.column.id,
     filterFn: filterCollectionByName('consumers'),
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

diff --git a/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx b/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx
@@ -5,6 +5,7 @@ import { useMemo, useState } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForMessageType } from './MessageTableColumns';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'services'>>();
 
@@ -40,14 +41,6 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
-  // columnHelper.accessor('data.version', {
-  //   header: () => <span>Version</span>,
-  //   cell: (info) => {
-  //     const service = info.row.original;
-  //     return <div className="text-left">{`v${info.getValue()} ${service.data.latestVersion === service.data.version ? '(latest)': ''}`}</div>
-  //   },
-  //   footer: (info) => info.column.id,
-  // }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
@@ -175,6 +168,7 @@ export const columns = () => [
     },
     filterFn: filterCollectionByName('sends'),
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

diff --git a/eventcatalog/src/components/Tables/columns/SharedColumns.tsx b/eventcatalog/src/components/Tables/columns/SharedColumns.tsx
@@ -0,0 +1,44 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { Tag } from 'lucide-react';
+import { filterByBadge } from '../filters/custom-filters';
+export const createBadgesColumn = <T extends { data: { badges?: any[] } }>(
+  columnHelper: ReturnType<typeof createColumnHelper<T>>
+) => {
+  return columnHelper.accessor((row) => row.data.badges, {
+    id: 'badges',
+    header: () => <span>Badges</span>,
+    cell: (info) => {
+      const item = info.row.original;
+      const badges = item.data.badges || [];
+
+      if (badges?.length === 0 || !badges)
+        return <div className="font-light text-sm text-gray-400/60 text-left italic">No badges documented</div>;
+
+      return (
+        <ul>
+          {badges.map((badge: any, index: number) => {
+            return (
+              <li key={`${badge.id}-${index}`} className="py-1 group font-light ">
+                <div className="group-hover:text-primary flex space-x-1 items-center ">
+                  <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
+                    <span className="flex items-center">
+                      <span className={`bg-${badge.backgroundColor}-500 h-full rounded-tl rounded-bl p-1`}>
+                        {badge.icon && <badge.icon className="h-4 w-4 text-white" />}
+                        {!badge.icon && <Tag className="h-4 w-4 text-white" />}
+                      </span>
+                      <span className="leading-none px-2 group-hover:underline ">{badge.content}</span>
+                    </span>
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    meta: {
+      filterVariant: 'badges',
+    },
+    filterFn: filterByBadge,
+  });
+};
diff --git a/eventcatalog/src/components/Tables/filters/custom-filters.ts b/eventcatalog/src/components/Tables/filters/custom-filters.ts
@@ -12,3 +12,8 @@ export const filterByName = (row: any, key: string, searchValue: string) => {
   const label = `${row?.original?.data.name} (v${row?.original?.data.version})` || '';
   return label.toLowerCase().includes(searchValue.toLowerCase());
 };
+
+export const filterByBadge = (row: any, key: string, searchValue: string) => {
+  const badges = row?.original?.data?.badges || [];
+  return badges.some((badge: any) => badge.content.toLowerCase().includes(searchValue.toLowerCase()));
+};
diff --git a/eventcatalog/src/layouts/DiscoverLayout.astro b/eventcatalog/src/layouts/DiscoverLayout.astro
@@ -100,7 +100,7 @@ const tabs = [
     </div>
 
     <!-- Table -->
-    <div class="pb-20 ml-6">
+    <div class="pb-20 ml-6 md:pr-10">
       <div>
         <div class="sm:flex sm:items-center py-4 pb-4" id="discover-title">
           <div class="sm:flex-auto space-y-2">

diff --git a/package-lock.json b/package-lock.json