Electron test: (regression) you can scroll the file pane when ETOOMANYFILES to view in one view (#3520)

* can scroll files pane

* clean up

e2e/playwright/projects.spec.ts

@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/test'
 import {
   doExport,
   getUtils,
+  isOutOfViewInScrollContainer,
   Paths,
   setupElectron,
   tearDown,
@@ -964,6 +965,115 @@ test(
   }
 )
 
+test(
+  'file plane is scrollable when there are many files',
+  { tag: '@electron' },
+  async ({ browserName }, testInfo) => {
+    const { electronApp, page } = await setupElectron({
+      testInfo,
+      folderSetupFn: async (dir) => {
+        await fsp.mkdir(`${dir}/testProject`, { recursive: true })
+        const fileNames = [
+          'angled_line.kcl',
+          'basic_fillet_cube_close_opposite.kcl',
+          'basic_fillet_cube_end.kcl',
+          'basic_fillet_cube_next_adjacent.kcl',
+          'basic_fillet_cube_previous_adjacent.kcl',
+          'basic_fillet_cube_start.kcl',
+          'big_number_angle_to_match_length_x.kcl',
+          'big_number_angle_to_match_length_y.kcl',
+          'close_arc.kcl',
+          'computed_var.kcl',
+          'cube-embedded.gltf',
+          'cube.bin',
+          'cube.glb',
+          'cube.gltf',
+          'cube.kcl',
+          'cube.mtl',
+          'cube.obj',
+          'cylinder.kcl',
+          'dimensions_match.kcl',
+          'extrude-custom-plane.kcl',
+          'extrude-inside-fn-with-tags.kcl',
+          'fillet-and-shell.kcl',
+          'fillet_duplicate_tags.kcl',
+          'focusrite_scarlett_mounting_braket.kcl',
+          'function_sketch.kcl',
+          'function_sketch_with_position.kcl',
+          'global-tags.kcl',
+          'helix_ccw.kcl',
+          'helix_defaults.kcl',
+          'helix_defaults_negative_extrude.kcl',
+          'helix_with_length.kcl',
+          'i_shape.kcl',
+          'kittycad_svg.kcl',
+          'lego.kcl',
+          'math.kcl',
+          'member_expression_sketch_group.kcl',
+          'mike_stress_test.kcl',
+          'negative_args.kcl',
+          'order-sketch-extrude-in-order.kcl',
+          'order-sketch-extrude-out-of-order.kcl',
+          'parametric.kcl',
+          'parametric_with_tan_arc.kcl',
+          'pattern_vase.kcl',
+          'pentagon_fillet_sugar.kcl',
+          'pipe_as_arg.kcl',
+          'pipes_on_pipes.kcl',
+          'riddle.kcl',
+          'riddle_small.kcl',
+          'router-template-slate.kcl',
+          'scoped-tags.kcl',
+          'server-rack-heavy.kcl',
+          'server-rack-lite.kcl',
+          'sketch_on_face.kcl',
+          'sketch_on_face_circle_tagged.kcl',
+          'sketch_on_face_end.kcl',
+          'sketch_on_face_end_negative_extrude.kcl',
+          'sketch_on_face_start.kcl',
+          'tan_arc_x_line.kcl',
+          'tangential_arc.kcl',
+        ]
+        for (const fileName of fileNames) {
+          await fsp.copyFile(
+            `src/wasm-lib/tests/executor/inputs/${fileName}`,
+            `${dir}/testProject/${fileName}`
+          )
+        }
+      },
+    })
+
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    page.on('console', console.log)
+
+    await test.step('setup, open file pane', async () => {
+      await page.getByText('testProject').click()
+      await expect(page.getByTestId('loading')).toBeAttached()
+      await expect(page.getByTestId('loading')).not.toBeAttached({
+        timeout: 20_000,
+      })
+
+      await page.getByTestId('files-pane-button').click()
+    })
+
+    await test.step('check the last file is out of view initially, and can be scrolled to', async () => {
+      const element = page.getByText('tangential_arc.kcl')
+      const container = page.getByTestId('file-pane-scroll-container')
+
+      await expect(await isOutOfViewInScrollContainer(element, container)).toBe(
+        true
+      )
+      await element.scrollIntoViewIfNeeded()
+      await expect(await isOutOfViewInScrollContainer(element, container)).toBe(
+        false
+      )
+    })
+
+    await electronApp.close()
+  }
+)
+
 test(
   'Settings persist across restarts',
   { tag: '@electron' },

e2e/playwright/test-utils.ts

@@ -5,6 +5,7 @@ import {
   TestInfo,
   BrowserContext,
   _electron as electron,
+  Locator,
 } from '@playwright/test'
 import { EngineCommand } from 'lang/std/artifactGraph'
 import os from 'os'
@@ -745,3 +746,22 @@ export async function setupElectron({
 
   return { electronApp, page }
 }
+
+export async function isOutOfViewInScrollContainer(
+  element: Locator,
+  container: Locator
+): Promise<boolean> {
+  const elementBox = await element.boundingBox({ timeout: 5_000 })
+  const containerBox = await container.boundingBox({ timeout: 5_000 })
+
+  let isOutOfView = false
+  if (elementBox && containerBox)
+    return (
+      elementBox.y + elementBox.height > containerBox.y + containerBox.height ||
+      elementBox.y < containerBox.y ||
+      elementBox.x + elementBox.width > containerBox.x + containerBox.width ||
+      elementBox.x < containerBox.x
+    )
+
+  return isOutOfView
+}

src/components/FileTree.tsx

@@ -464,7 +464,10 @@ export const FileTreeInner = ({
   }, [documentHasFocus])
 
   return (
-    <div className="overflow-auto pb-12 absolute inset-0">
+    <div
+      className="overflow-auto pb-12 absolute inset-0"
+      data-testid="file-pane-scroll-container"
+    >
       <ul
         className="m-0 p-0 text-sm"
         onClickCapture={(e) => {