feat: make the module tree scrollable + scroll to selected module (#2557

) Final part of #2487 https://github.com/user-attachments/assets/eb7ed1eb-d8ae-4a92-b56e-7bde8aed3a6b
TBD54566975 · Aug 29, 2024 · 947cdff · 947cdff
1 parent 6058555
commit 947cdff
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>