feature: Project Explorer update, first pass. (#7656)

* chore: saving off skeleton progress... need to write unit tests do some clean up

* chore: big cleanup, typing, adding comments, better structure

* chore: moved selected row and opened rows up a level in the react components

* feature: button to collapse all folders

* feat: implemented projet explorer refresh

* feat: sort was not sorting folders and files at each level, selection logic was not taking parent into account

* chore: unable to implement insert at index, need to come back to this, wasting time

* chore: css pointer and hover

* chore: adding custom folder icon

* chore: adding opened icon

* feat: adding line for indentation visual

* fix: react key warning

* fix: trying to make progress on selection, active index, keyboard, and moust events

* chore: aria support

* chore: implementing removing the click area when you click outside the ref

* fix: fmt?

* chore: active index logic, keyboard arrow logic

* chore: outline offset logic

* chore: some arrow key usage, need to move data up a level I think

* chore: more data up a level

* fix: improving file/folder structure and resolving typescript errors

* chore: clean up

* fix: fmt

* fix: hmm trying to deal with state management

* fix: moving the filter logic up

* chore: keyboard interactions

* fix: ope

* fix:commiting broken context menu

* fix: some testing code for dragging

* chore:debug with react dev tools

* fix: dang

* fix: context menu selection outline

* fix: fmt

* fix: moved path into the file entry

* fix: saving off renaming progress

* fix: fmt

* chore: saving off some progress for the renaming, need a new systemiomachine actor

* fix: renaming folders!

* fix: blocking arrow keys on renaming

* chore: renaming files with the systemio

* fix: force renaming with extensions since they can rename their file out of view :(

* fix: deleting file or folder

* fix: deleting folders

* fix: open in new window

* fix: fixing linter and ts issues

* fix: more tsc error fixing

* fix: renaming handlers

* fix: on context menu open

* fix: more ts fixes

* fix: more tsc fixes

* fix: need to fix some major event typescript handling

* fix: testing with multiples!

* fix: handling blur,focus for the containers to start tabbing and using arrow keys

* fix: updating icons

* fix: placeholders and showing them for add file or foldeR

* fix: big add file and folder logic

* fix: fmt

* fix: implemented adding files and folders at the activeIndex level instead of selected

* chore: css fixes based on Frank's design

* chore: more css updates

* chore: css to know what region you are renaming or adding a new file in

* chore: improving some css and layout issues

* fix: the caching of the callback from the context menu borked the function

* chore: trying to layout the project explorer in the tab properly

* fix: proxy header actions

* fix: clear internal state across projects switching

* fix: ope, opening any file known to man!

* fix: only running on kcl files and fmt

* fix: parent path shows error

* fix: fmt

* chore: opening parent folders all the way down to the file that is loaded via the index loader data project,file

* fix: error handling missing file scenario

* fix: getting rid of debug index

* chore: placeholder is empty string so the fake name is not shown to the user

* fix: keep placeholder if it is a real file, only hide it on the fake placeholder file and folder

* fix: auto fmt

* chore: improved copy for renaming folders

* chore: updated and tested copy for renaming file names

* chore: updated copy for creating a blank kcl file

* chore: fixed copy for creating a blank folder:

* chore: redirect to file after creation

* chore: redirect on rename file at any tree level

* fix: auto fmt

* fix: only navigate on rename if the file you are renaming is the one you have loaded

* fix: redirect only on rename, need to have a cleaner path library and variable name

* fix: fmt

* fix: adding comments

* fix: delete and navigate

* fix: fmt

* fix: on enter it opens file

* fix: removing debug package

* fix: fixing tsc errors

* fix: resolving tsc errors

* fix: fixing bug with enter with project loader name ref

* fix: fixing height to allow clicking empty space then the arrow keys for -1 indexing

* fix: ope testing code when helping adam got here

* fix: adding toast since it is using a create file and navigate function which is awkwardly named import file url

* fix: typo

* fix: trying to fix more tsc errors

* chore: readonly and navigation booleans

* fix: aria set size and position in set were computed wrong

* chore: deleted the old file tree:

* chore: filemachineprovider still has useful code, it is now modelingpageprovider

* fix: formatter

* fix: adding some unit tests

* chore: adding unit tests for adding the placeholders

* fix: 2 e2e tests, made a new helper function for the future

* fix: fixing another e2e test

* fix: finally found the right helper function, don't know why this is a toolbar, it is not a toolbar

* fix: e2e tests...

* fix: updating button role to the treeitem

* fix: fixing e2e test

* ope: I need the delete confirmation

* fix: local state for modal confirmation but the action takes place on the callback of the modal in the parent

* fix: fixing more e2e tests

* fix: fixing more e2e tests

* chore: added insert on importable files

* fix: fmt

* fix: fixing another e2e test

* fix: fixing locator for another e2e test

* fix: another e2e test

* fix: I thought I fixed this typo already

* fix: make ENOENT a warning, it isn't a real error

* fix: last known index so you can swap file/folder when creating in the same location

* fix: fixing another locator for e2e test

* chore: Jest to vitestga!

* fix: this is covered in the unit test runner

* fix: cleanup testing code

* Fix tsc errors

* fix: moved file so the url is found

* fix: ope, wrong function

* fix: addressing PR comments, implementing close folder if you are on first file and press left arrow

* chore: learning and implementing unit component testing, got some good ones for ProjectExplorer!

* chore: adding more ProjectExplorer tests, added an event click test! it works!

* chore: adding a unit test for clicking collapse button in ProjectExplorer

* chore: adding more unit test scenarios I manually tested but now in react unit tests

* chore: added unit test for opening and closing folders to check child folders stay opened if a higher parent is closed and reponed

* fix: removed unused call from makefile

* fix: I swapped a boolean statement for navigation, will navigate on file create if you have canNavigate enabled

* Update snapshots

* Update snapshots

* Update snapshots

* fix: adding an issue todo for cut,copy, and paste

* Update snapshots

* fix: don't use a real url in the tests?

* fix: trying to remove this testing url

---------

Co-authored-by: Frank Noirot <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Jace Browning <[email protected]>

Author: 4 people

.github/workflows/unit-tests.yml

@@ -97,48 +97,3 @@ jobs:
           git commit -am "Look at this (photo)Graph *in the voice of Nickelback*" || true
           git push
           git push origin ${{ github.head_ref }}
-
-  npm-test-unit-components:
-    runs-on: namespace-profile-ubuntu-2-cores
-    needs: npm-build-wasm
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-
-      - run: npm install
-      - uses: taiki-e/install-action@c07504cae06f832dc8de08911c9a9c5cddb0d2d3
-        with:
-          tool: wasm-pack
-
-      - name: Download all artifacts
-        uses: actions/download-artifact@v4
-
-      - name: Copy prepared wasm
-        run: |
-          ls -R prepared-wasm
-          cp prepared-wasm/kcl_wasm_lib_bg.wasm public
-          mkdir rust/kcl-wasm-lib/pkg
-          cp prepared-wasm/kcl_wasm_lib* rust/kcl-wasm-lib/pkg
-
-      - name: Copy prepared ts-rs bindings
-        run: |
-          ls -R prepared-ts-rs-bindings
-          mkdir rust/kcl-lib/bindings
-          cp -r prepared-ts-rs-bindings/* rust/kcl-lib/bindings/
-
-      - name: Run component tests
-        run: npm run test:unit:components
-
-      - name: Upload results
-        if: always()
-        run: .github/ci-cd-scripts/upload-results.sh
-        env:
-          TAB_API_URL: ${{ secrets.TAB_API_URL }}
-          TAB_API_KEY: ${{ secrets.TAB_API_KEY }}
-          CI_COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
-          CI_PR_NUMBER: ${{ github.event.pull_request.number }}
-          CI_SUITE: unit:components

Makefile

@@ -129,7 +129,6 @@ test: test-unit test-e2e
 .PHONY: test-unit
 test-unit: install ## Run the unit tests
 	npm run test:rust
-	npm run test:unit:components
 	@ curl -fs localhost:3000 >/dev/null || ( echo "Error: localhost:3000 not available, 'make run-web' first" && exit 1 )
 	npm run test:unit
 

e2e/playwright/desktop-export.spec.ts

@@ -11,7 +11,7 @@ import { expect, test } from '@e2e/playwright/zoo-test'
 test(
   'export works on the first try',
   { tag: ['@desktop', '@macos', '@windows', '@skipLocalEngine'] },
-  async ({ page, context, scene, tronApp, cmdBar }, testInfo) => {
+  async ({ page, context, scene, tronApp, cmdBar, toolbar }, testInfo) => {
     if (!tronApp) {
       fail()
     }
@@ -95,8 +95,7 @@ test(
       await u.openFilePanel()
 
       // Click on the other file
-      const otherKclButton = page.getByRole('button', { name: 'other.kcl' })
-      await otherKclButton.click()
+      await toolbar.openFile('other.kcl')
 
       // Close the file pane
       await u.closeFilePanel()

e2e/playwright/file-tree.spec.ts

@@ -267,7 +267,7 @@ test.describe('when using the file tree to', () => {
     {
       tag: '@desktop',
     },
-    async ({ page }, testInfo) => {
+    async ({ page, toolbar }, testInfo) => {
       const {
         panesOpen,
         pasteCodeInEditor,
@@ -293,19 +293,11 @@ test.describe('when using the file tree to', () => {
 
       // Create a large lego file
       await createNewFile('lego')
-      const legoFile = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: 'lego.kcl' }),
-      })
-      await expect(legoFile).toBeVisible({ timeout: 60_000 })
-      await legoFile.click()
       const kclLego = await fsp.readFile(
         'rust/kcl-lib/e2e/executor/inputs/lego.kcl',
         'utf-8'
       )
       await pasteCodeInEditor(kclLego)
-      const mainFile = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: 'main.kcl' }),
-      })
 
       // Open settings and enable the debug panel
       await page
@@ -319,12 +311,12 @@ test.describe('when using the file tree to', () => {
       await test.step('swap between small and large files', async () => {
         await openDebugPanel()
         // Previously created a file so we need to start back at main.kcl
-        await mainFile.click()
+        await toolbar.openFile('main.kcl')
         await expectCmdLog('[data-message-type="execution-done"]', 60_000)
         // Click the large file
-        await legoFile.click()
+        await toolbar.openFile('lego.kcl')
         // Once it is building, click back to the smaller file
-        await mainFile.click()
+        await toolbar.openFile('main.kcl')
         await expectCmdLog('[data-message-type="execution-done"]', 60_000)
         await closeDebugPanel()
       })
@@ -364,13 +356,8 @@ test.describe('Renaming in the file tree', () => {
         const filePath = join(dir, 'Test Project', `${newFileName}.kcl`)
         return fs.existsSync(filePath)
       }
-
-      const fileToRename = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
-      const renamedFile = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'newFileName.kcl' }) })
+      const fileToRename = u.locatorFile('fileToRename.kcl')
+      const renamedFile = u.locatorFile('newFileName.kcl')
       const renameMenuItem = page.getByRole('button', { name: 'Rename' })
       const renameInput = page.getByPlaceholder('fileToRename.kcl')
       const codeLocator = page.locator('.cm-content')
@@ -453,12 +440,8 @@ test.describe('Renaming in the file tree', () => {
       }
       const projectLink = page.getByText('Test Project')
       const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const fileToRename = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'fileToRename.kcl' }) })
-      const renamedFile = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: newFileName + FILE_EXT }),
-      })
+      const fileToRename = u.locatorFile('fileToRename.kcl')
+      const renamedFile = u.locatorFile(newFileName + FILE_EXT)
       const renameMenuItem = page.getByRole('button', { name: 'Rename' })
       const renameInput = page.getByPlaceholder('fileToRename.kcl')
       const codeLocator = page.locator('.cm-content')
@@ -534,10 +517,8 @@ test.describe('Renaming in the file tree', () => {
       // Constants and locators
       const projectLink = page.getByText('Test Project')
       const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToRename = page.getByRole('button', {
-        name: 'folderToRename',
-      })
-      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
+      const folderToRename = u.locatorFolder('folderToRename')
+      const renamedFolder = u.locatorFolder('newFolderName')
       const renameMenuItem = page.getByRole('button', { name: 'Rename' })
       const originalFolderName = 'folderToRename'
       const renameInput = page.getByPlaceholder(originalFolderName)
@@ -616,13 +597,9 @@ test.describe('Renaming in the file tree', () => {
       // Constants and locators
       const projectLink = page.getByText('Test Project')
       const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToRename = page.getByRole('button', {
-        name: 'folderToRename',
-      })
-      const renamedFolder = page.getByRole('button', { name: 'newFolderName' })
-      const fileWithinFolder = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
-      })
+      const folderToRename = u.locatorFolder('folderToRename')
+      const renamedFolder = u.locatorFolder('newFolderName')
+      const fileWithinFolder = u.locatorFile('someFileWithin.kcl')
       const renameMenuItem = page.getByRole('button', { name: 'Rename' })
       const originalFolderName = 'folderToRename'
       const renameInput = page.getByPlaceholder(originalFolderName)
@@ -716,9 +693,7 @@ test.describe('Deleting items from the file pane', () => {
       // Constants and locators
       const projectCard = page.getByText('testProject')
       const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const fileToDelete = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'fileToDelete.kcl' }) })
+      const fileToDelete = u.locatorFile('fileToDelete.kcl')
       const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
       const deleteConfirmation = page.getByTestId('delete-confirmation')
 
@@ -783,9 +758,7 @@ test.describe('Deleting items from the file pane', () => {
       // Constants and locators
       const projectCard = page.getByText('Test Project')
       const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToDelete = page.getByRole('button', {
-        name: 'folderToDelete',
-      })
+      const folderToDelete = u.locatorFolder('folderToDelete')
       const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
       const deleteConfirmation = page.getByTestId('delete-confirmation')
 
@@ -837,12 +810,8 @@ test.describe('Deleting items from the file pane', () => {
       // Constants and locators
       const projectCard = page.getByText('Test Project')
       const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToDelete = page.getByRole('button', {
-        name: 'folderToDelete',
-      })
-      const fileWithinFolder = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
-      })
+      const folderToDelete = u.locatorFolder('folderToDelete')
+      const fileWithinFolder = u.locatorFile('someFileWithin.kcl')
       const deleteMenuItem = page.getByRole('button', { name: 'Delete' })
       const deleteConfirmation = page.getByTestId('delete-confirmation')
 
@@ -905,12 +874,8 @@ test.describe('Deleting items from the file pane', () => {
       // Constants and locators
       const projectCard = page.getByText(TEST_PROJECT_NAME)
       const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToDelete = page.getByRole('button', {
-        name: 'folderToDelete',
-      })
-      const fileWithinFolder = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
-      })
+      const folderToDelete = u.locatorFolder('folderToDelete')
+      const fileWithinFolder = u.locatorFile('someFileWithin.kcl')
 
       await test.step('Open project and navigate into folderToDelete', async () => {
         await projectCard.click()
@@ -969,12 +934,8 @@ test.describe('Deleting items from the file pane', () => {
       // Constants and locators
       const projectCard = page.getByText(TEST_PROJECT_NAME)
       const projectMenuButton = page.getByTestId('project-sidebar-toggle')
-      const folderToDelete = page.getByRole('button', {
-        name: 'folderToDelete',
-      })
-      const fileWithinFolder = page.getByRole('listitem').filter({
-        has: page.getByRole('button', { name: 'someFileWithin.kcl' }),
-      })
+      const folderToDelete = u.locatorFolder('folderToDelete')
+      const fileWithinFolder = u.locatorFile('someFileWithin.kcl')
 
       await test.step('Open project and navigate into folderToDelete', async () => {
         await projectCard.click()
@@ -1039,9 +1000,7 @@ test.describe('Undo and redo do not keep history when navigating between files',
 
       // Constants and locators
       const projectCard = page.getByText('testProject')
-      const otherFile = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'other.kcl' }) })
+      const otherFile = u.locatorFile('other.kcl')
 
       await test.step('Open project and make a change to the file', async () => {
         await projectCard.click()
@@ -1106,9 +1065,7 @@ test.describe('Undo and redo do not keep history when navigating between files',
 
       // Constants and locators
       const projectCard = page.getByText('testProject')
-      const otherFile = page
-        .getByRole('listitem')
-        .filter({ has: page.getByRole('button', { name: 'other.kcl' }) })
+      const otherFile = u.locatorFile('other.kcl')
 
       const badContent = 'this shit'
       await test.step('Open project and make a change to the file', async () => {

e2e/playwright/fixtures/toolbarFixture.ts

@@ -76,7 +76,7 @@ export class ToolbarFixture {
     this.exitSketchBtn = page.getByTestId('sketch-exit')
     this.fileTreeBtn = page.locator('[id="files-button-holder"]')
     this.createFileBtn = page.getByTestId('create-file-button')
-    this.treeInputField = page.getByTestId('tree-input-field')
+    this.treeInputField = page.getByTestId('file-rename-field')
     this.loadButton = page.getByTestId('add-file-to-project-pane-button')
 
     this.filePane = page.locator('#files-pane')

e2e/playwright/projects.spec.ts

@@ -873,7 +873,7 @@ default project name`, async ({ homePage, toolbar }) => {
 test(
   'File in the file pane should open with a single click',
   { tag: '@desktop' },
-  async ({ context, homePage, page }, testInfo) => {
+  async ({ context, homePage, page, scene, toolbar }, testInfo) => {
     const projectName = 'router-template-slate'
     await context.folderSetupFn(async (dir) => {
       await fsp.mkdir(`${dir}/${projectName}`, { recursive: true })
@@ -900,11 +900,7 @@ test(
     await expect(u.codeLocator).toContainText('minClampingDistance')
 
     await page.getByRole('button', { name: 'Project Files' }).click()
-
-    const file = page.getByRole('button', { name: 'otherThingToClickOn.kcl' })
-    await expect(file).toBeVisible()
-
-    await file.click()
+    await toolbar.openFile('otherThingToClickOn.kcl')
 
     await expect(u.codeLocator).toContainText(
       'A mounting bracket for the Focusrite Scarlett Solo audio interface'
@@ -1532,7 +1528,8 @@ test(
     })
 
     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 u = await getUtils(page)
+      const element = u.locatorFile('tangential_arc.kcl')
       const container = page.getByTestId('file-pane-scroll-container')
 
       await expect(await isOutOfViewInScrollContainer(element, container)).toBe(