From 2589092849fa79968d5299a0eb617f2c2917015c Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 24 Jan 2025 16:28:43 -0600
Subject: [PATCH] Website: Update schema documentation sidebar behavior
 (#25758)

Closes: https://github.com/fleetdm/confidential/issues/9412

Changes:
- Updated the table of contents sidebar on osquery schema table pages to
scroll the table of contents to the currently viewed table when the page
loads.
---
 website/assets/js/pages/osquery-table-details.page.js | 8 ++++++++
 website/views/pages/osquery-table-details.ejs         | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/website/assets/js/pages/osquery-table-details.page.js b/website/assets/js/pages/osquery-table-details.page.js
index d940b76af9..7da40bf678 100644
--- a/website/assets/js/pages/osquery-table-details.page.js
+++ b/website/assets/js/pages/osquery-table-details.page.js
@@ -119,6 +119,14 @@ parasails.registerPage('osquery-table-details', {
       let tablePartialHeight = $('[purpose="table-container"]').height();
       $('[purpose="table-of-contents"]').css({'max-height': tablePartialHeight - 120});
     })();
+    // 5 ms after the page loads, scroll the table of contents to the currently active link.
+    await setTimeout(()=>{
+      let activeTableLink = $('[purpose="table-of-contents-link"].active')[0];
+      if(activeTableLink) {
+        $('[purpose="table-of-contents"]')[0].scrollTop = activeTableLink.offsetTop - 12;
+      }
+      // Note: we're running this code after a 5ms delay to make sure the tables have been filtered, otherwise it will scroll the table of contents to the links posiiton in the full list of tables.
+    }, 5);
   },
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
   //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
diff --git a/website/views/pages/osquery-table-details.ejs b/website/views/pages/osquery-table-details.ejs
index 5536bce814..34b3b72424 100644
--- a/website/views/pages/osquery-table-details.ejs
+++ b/website/views/pages/osquery-table-details.ejs
@@ -62,7 +62,7 @@
           </div>
           <div style="position: relative;">
             <div purpose="table-of-contents">
-              <a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url+[selectedPlatform !== 'all' ? '?platformFilter='+encodeURIComponent(selectedPlatform) : '' ]" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
+              <a class="d-block" purpose="table-of-contents-link" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url+[selectedPlatform !== 'all' ? '?platformFilter='+encodeURIComponent(selectedPlatform) : '' ]" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
             </div>
             <div purpose="overflow-shadow" class="d-none d-lg-block"></div>
           </div>