From 9a531d252b043b4f1338184dda00761a05961489 Mon Sep 17 00:00:00 2001
From: David Boyne <boyneyy123@gmail.com>
Date: Tue, 29 Oct 2024 16:40:25 +0000
Subject: [PATCH] feat(core): added ability to embed discovery table (#923)

* feat(core): added ability to embed discovery table

* Create angry-cycles-arrive.md
---
 .changeset/angry-cycles-arrive.md       |  5 +++++
 src/components/Tables/Table.tsx         | 14 +++++++++++++-
 src/layouts/DiscoverLayout.astro        | 11 +----------
 src/layouts/VerticalSideBarLayout.astro |  6 +++++-
 4 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/angry-cycles-arrive.md

diff --git a/.changeset/angry-cycles-arrive.md b/.changeset/angry-cycles-arrive.md
new file mode 100644
index 00000000..4e47630a
--- /dev/null
+++ b/.changeset/angry-cycles-arrive.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+feat(core): added ability to embed discovery table
diff --git a/src/components/Tables/Table.tsx b/src/components/Tables/Table.tsx
index 26a60ea2..bc04825a 100644
--- a/src/components/Tables/Table.tsx
+++ b/src/components/Tables/Table.tsx
@@ -15,7 +15,7 @@ import type { CollectionEntry } from 'astro:content';
 import DebouncedInput from './DebouncedInput';
 
 import { getColumnsByCollection } from './columns';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { CollectionTypes } from '@types';
 
 declare module '@tanstack/react-table' {
@@ -40,6 +40,18 @@ export const Table = ({
   const [data, _setData] = useState(initialData);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
+  useEffect(() => {
+    console.log(window.location.pathname);
+  }, []);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const id = urlParams.get('id');
+    if (id) {
+      setColumnFilters([{ id: 'name', value: id }]);
+    }
+  }, []);
+
   const columns = useMemo(() => getColumnsByCollection(collection), [collection]);
 
   const table = useReactTable({
diff --git a/src/layouts/DiscoverLayout.astro b/src/layouts/DiscoverLayout.astro
index 620c744d..769bcd3f 100644
--- a/src/layouts/DiscoverLayout.astro
+++ b/src/layouts/DiscoverLayout.astro
@@ -76,16 +76,7 @@ const tabs = [
 
 <VerticalSideBarLayout title={`Explore | ${title}`}>
   <main class="ml-0">
-    <div>
-      <!-- <div class="sm:hidden">
-        <label for="tabs" class="sr-only">Select a tab</label>
-        <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
-          <option>My Account</option>
-          <option>Company</option>
-          <option selected>Team Members</option>
-          <option>Billing</option>
-        </select>
-      </div> -->
+    <div id="discover-collection-tabs">
       <div class="hidden sm:block">
         <div class="border-b border-gray-200">
           <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">
diff --git a/src/layouts/VerticalSideBarLayout.astro b/src/layouts/VerticalSideBarLayout.astro
index f6398fab..c4615e77 100644
--- a/src/layouts/VerticalSideBarLayout.astro
+++ b/src/layouts/VerticalSideBarLayout.astro
@@ -224,6 +224,7 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
     const urlSearchParams = new URLSearchParams(window.location.search);
     const params = Object.fromEntries(urlSearchParams.entries());
     const embeded = params.embed === 'true' ? true : false;
+    const content = document.getElementById('content');
 
     if (embeded) {
       const elementsToHide = [
@@ -231,16 +232,19 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
         'eventcatalog-header',
         'eventcatalog-header-spacer',
         'visualiser-footer',
+        'discover-collection-tabs',
       ];
 
       elementsToHide.forEach((id) => {
         const element = document.getElementById(id);
         if (element) element.style.display = 'none';
       });
+
+      content.classList.remove('ml-16');
+      return;
     }
 
     const sidebar = document.getElementById('sidebar');
-    const content = document.getElementById('content');
     const currentPath = window.location.href;
 
     // Hide the sidebar if the current navigation item is not a sidebar item