From 947cdff93c7f2b03b3f7a51d9b952c175438fa77 Mon Sep 17 00:00:00 2001
From: Denise Li <dli@squareup.com>
Date: Thu, 29 Aug 2024 19:17:33 -0400
Subject: [PATCH] feat: make the module tree scrollable + scroll to selected
 module (#2557)

Final part of https://github.com/TBD54566975/ftl/issues/2487



https://github.com/user-attachments/assets/eb7ed1eb-d8ae-4a92-b56e-7bde8aed3a6b
---
 frontend/src/components/ResizableHorizontalPanels.tsx |  2 +-
 frontend/src/features/modules/ModulesTree.tsx         | 11 +++++++++--
 frontend/src/layout/Layout.tsx                        |  4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ResizableHorizontalPanels.tsx b/frontend/src/components/ResizableHorizontalPanels.tsx
index 7338e10f0..b5009af45 100644
--- a/frontend/src/components/ResizableHorizontalPanels.tsx
+++ b/frontend/src/components/ResizableHorizontalPanels.tsx
@@ -48,7 +48,7 @@ export const ResizableHorizontalPanels: React.FC<ResizableHorizontalPanelsProps>
       <div
         className='cursor-col-resize bg-gray-100 dark:bg-gray-900 hover:bg-indigo-600'
         onMouseDown={startDragging}
-        style={{ width: '3px', cursor: 'col-resize' }}
+        style={{ width: '2px', cursor: 'col-resize' }}
       />
       <div className='flex-1 overflow-auto'>{rightPanelContent}</div>
     </div>
diff --git a/frontend/src/features/modules/ModulesTree.tsx b/frontend/src/features/modules/ModulesTree.tsx
index b408b6e74..e2a9c048e 100644
--- a/frontend/src/features/modules/ModulesTree.tsx
+++ b/frontend/src/features/modules/ModulesTree.tsx
@@ -16,7 +16,7 @@ import {
   TableCellsIcon,
 } from '@heroicons/react/24/outline'
 import type { ForwardRefExoticComponent, SVGProps } from 'react'
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import type { Decl } from '../../protos/xyz/block/ftl/v1/schema/schema_pb'
 import { classNames } from '../../utils'
@@ -70,12 +70,19 @@ const DeclNode = ({ decl, href, isSelected }: { decl: Decl; href: string; isSele
 
 const ModuleSection = ({ module, isExpanded, toggleExpansion }: { module: ModuleTreeItem; isExpanded: boolean; toggleExpansion: (m: string) => void }) => {
   const { moduleName, declName } = useParams()
-  const isSelected = useMemo(() => moduleName === module.name, [moduleName, module.name])
   const navigate = useNavigate()
+  const isSelected = useMemo(() => moduleName === module.name, [moduleName, module.name])
+  const selectedRef = useRef<HTMLButtonElement>(null)
+  const refProp = isSelected ? { ref: selectedRef } : {}
+
+  // Scroll to the selected module on the first page load
+  useEffect(() => selectedRef.current?.scrollIntoView(), [])
+
   return (
     <li key={module.name} id={`module-tree-module-${module.name}`} className='my-2'>
       <Disclosure as='div' defaultOpen={isExpanded}>
         <DisclosureButton
+          {...refProp}
           className={classNames(
             isSelected ? 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-gray-600' : 'hover:bg-gray-200 hover:dark:bg-gray-700',
             'group flex w-full modules-center gap-x-2 space-y-1 rounded-md px-2 text-left text-sm font-medium leading-6',
diff --git a/frontend/src/layout/Layout.tsx b/frontend/src/layout/Layout.tsx
index 0e63b8520..6f6d135ca 100644
--- a/frontend/src/layout/Layout.tsx
+++ b/frontend/src/layout/Layout.tsx
@@ -7,9 +7,9 @@ export const Layout = () => {
   const version = status.data?.controllers?.[0]?.version
 
   return (
-    <div className='min-w-[800px] min-h-[600px] max-w-full max-h-full h-full flex flex-col dark:bg-gray-800 bg-white text-gray-700 dark:text-gray-200'>
+    <div className='min-w-[800px] max-w-full max-h-full h-full flex flex-col dark:bg-gray-800 bg-white text-gray-700 dark:text-gray-200'>
       <Navigation version={version} />
-      <main className='flex-1'>
+      <main className='flex-1' style={{ height: 'calc(100vh - 64px)' }}>
         <Outlet />
       </main>
     </div>