Show top level dir (#4165)

* Reload FileTree and File when changed externally

* Added tests

* Show project root in files pane

* Cut off titles that are too long

* Fix tests

e2e/playwright/onboarding-tests.spec.ts

@@ -425,7 +425,9 @@ test(
     const restartConfirmationButton = page.getByRole('button', {
       name: 'Make a new project',
     })
-    const tutorialProjectIndicator = page.getByText('Tutorial Project 00')
+    const tutorialProjectIndicator = page
+      .getByTestId('project-sidebar-toggle')
+      .filter({ hasText: 'Tutorial Project 00' })
     const tutorialModalText = page.getByText('Welcome to Modeling App!')
     const tutorialDismissButton = page.getByRole('button', { name: 'Dismiss' })
     const userMenuButton = page.getByTestId('user-sidebar-toggle')

e2e/playwright/projects.spec.ts

@@ -507,17 +507,18 @@ test(
   'File in the file pane should open with a single click',
   { tag: '@electron' },
   async ({ browserName }, testInfo) => {
+    const projectName = 'router-template-slate'
     const { electronApp, page } = await setupElectron({
       testInfo,
       folderSetupFn: async (dir) => {
-        await fsp.mkdir(`${dir}/router-template-slate`, { recursive: true })
+        await fsp.mkdir(`${dir}/${projectName}`, { recursive: true })
         await fsp.copyFile(
           'src/wasm-lib/tests/executor/inputs/router-template-slate.kcl',
-          `${dir}/router-template-slate/main.kcl`
+          `${dir}/${projectName}/main.kcl`
         )
         await fsp.copyFile(
           'src/wasm-lib/tests/executor/inputs/focusrite_scarlett_mounting_braket.kcl',
-          `${dir}/router-template-slate/otherThingToClickOn.kcl`
+          `${dir}/${projectName}/otherThingToClickOn.kcl`
         )
       },
     })
@@ -526,7 +527,7 @@ test(
 
     page.on('console', console.log)
 
-    await page.getByText('router-template-slate').click()
+    await page.getByText(projectName).click()
     await expect(page.getByTestId('loading')).toBeAttached()
     await expect(page.getByTestId('loading')).not.toBeAttached({
       timeout: 20_000,

e2e/playwright/text-to-cad-tests.spec.ts

@@ -710,7 +710,9 @@ test(
     await page.setViewportSize({ width: 1200, height: 500 })
 
     // Locators
-    const projectMenuButton = page.getByRole('button', { name: projectName })
+    const projectMenuButton = page
+      .getByTestId('project-sidebar-toggle')
+      .filter({ hasText: projectName })
     const textToCadFileButton = page.getByRole('listitem').filter({
       has: page.getByRole('button', { name: textToCadFileName }),
     })

src/components/FileTree.tsx

@@ -538,3 +538,19 @@ export const FileTreeInner = ({
     </div>
   )
 }
+
+export const FileTreeRoot = () => {
+  const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
+  const { project } = loaderData
+
+  // project.path should never be empty here but I guess during initial loading
+  // it can be.
+  return (
+    <div
+      className="max-w-xs text-ellipsis overflow-hidden cursor-pointer"
+      title={project?.path ?? ''}
+    >
+      {project?.name ?? ''}
+    </div>
+  )
+}

src/components/HelpMenu.tsx

@@ -4,7 +4,7 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { CustomIcon } from './CustomIcon'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
-import { createAndOpenNewProject } from 'lib/desktopFS'
+import { createAndOpenNewTutorialProject } from 'lib/desktopFS'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import { useLspContext } from './LspProvider'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
@@ -116,9 +116,10 @@ export function HelpMenu(props: React.PropsWithChildren) {
             if (isInProject) {
               navigate(filePath + PATHS.ONBOARDING.INDEX)
             } else {
-              createAndOpenNewProject({ onProjectOpen, navigate }).catch(
-                reportRejection
-              )
+              createAndOpenNewTutorialProject({
+                onProjectOpen,
+                navigate,
+              }).catch(reportRejection)
             }
           }}
         >

src/components/ModelingSidebar/ModelingPane.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react'
 import styles from './ModelingPane.module.css'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { ActionButton } from 'components/ActionButton'
@@ -6,22 +7,24 @@ import { CustomIconName } from 'components/CustomIcon'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { ActionIcon } from 'components/ActionIcon'
 
-export interface ModelingPaneProps
-  extends React.PropsWithChildren,
-    React.HTMLAttributes<HTMLDivElement> {
+export interface ModelingPaneProps {
+  id: string
+  children: ReactNode | ReactNode[]
+  className?: string
   icon?: CustomIconName | IconDefinition
-  title: string
+  title: ReactNode
   Menu?: React.ReactNode | React.FC
   detailsTestId?: string
   onClose: () => void
 }
 
 export const ModelingPaneHeader = ({
+  id,
   icon,
   title,
   Menu,
   onClose,
-}: Pick<ModelingPaneProps, 'icon' | 'title' | 'Menu' | 'onClose'>) => {
+}: Pick<ModelingPaneProps, 'id' | 'icon' | 'title' | 'Menu' | 'onClose'>) => {
   return (
     <div className={styles.header}>
       <div className="flex gap-2 items-center flex-1">
@@ -34,7 +37,7 @@ export const ModelingPaneHeader = ({
             bgClassName="!bg-transparent"
           />
         )}
-        <span>{title}</span>
+        <span data-testid={id + '-header'}>{title}</span>
       </div>
       {Menu instanceof Function ? <Menu /> : Menu}
       <ActionButton
@@ -86,6 +89,7 @@ export const ModelingPane = ({
       }
     >
       <ModelingPaneHeader
+        id={id}
         icon={icon}
         title={title}
         Menu={Menu}

src/components/ModelingSidebar/ModelingPanes/index.tsx

@@ -6,7 +6,7 @@ import { MouseEventHandler, ReactNode } from 'react'
 import { MemoryPane, MemoryPaneMenu } from './MemoryPane'
 import { LogsPane } from './LoggingPanes'
 import { DebugPane } from './DebugPane'
-import { FileTreeInner, FileTreeMenu } from 'components/FileTree'
+import { FileTreeInner, FileTreeMenu, FileTreeRoot } from 'components/FileTree'
 import { useKclContext } from 'lang/KclProvider'
 import { editorManager } from 'lib/singletons'
 import { ContextFrom } from 'xstate'
@@ -38,7 +38,8 @@ interface PaneCallbackProps {
 
 export type SidebarPane = {
   id: SidebarType
-  title: string
+  title: ReactNode
+  sidebarName?: string
   icon: CustomIconName | IconDefinition
   keybinding: string
   Content: ReactNode | React.FC
@@ -49,7 +50,7 @@ export type SidebarPane = {
 
 export type SidebarAction = {
   id: string
-  title: string
+  title: ReactNode
   icon: CustomIconName
   iconClassName?: string // Just until we get rid of FontAwesome icons
   keybinding: string
@@ -78,7 +79,8 @@ export const sidebarPanes: SidebarPane[] = [
   },
   {
     id: 'files',
-    title: 'Project Files',
+    title: <FileTreeRoot />,
+    sidebarName: 'Project Files',
     icon: 'folder',
     Content: FileTreeInner,
     keybinding: 'Shift + F',

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -5,6 +5,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  ReactNode,
   useContext,
 } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -270,7 +271,8 @@ interface ModelingPaneButtonProps
   extends React.HTMLAttributes<HTMLButtonElement> {
   paneConfig: {
     id: string
-    title: string
+    title: ReactNode
+    sidebarName?: string
     icon: CustomIconName | IconDefinition
     keybinding: string
     iconClassName?: string
@@ -299,7 +301,10 @@ function ModelingPaneButton({
       <button
         className="group pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent disabled:!border-transparent p-0 m-0 rounded-sm !outline-0 focus-visible:border-primary"
         onClick={onClick}
-        name={paneConfig.title}
+        name={
+          paneConfig.sidebarName ??
+          (typeof paneConfig.title === 'string' ? paneConfig.title : '')
+        }
         data-testid={paneConfig.id + '-pane-button'}
         disabled={disabledText !== undefined}
         aria-disabled={disabledText !== undefined}
@@ -315,7 +320,7 @@ function ModelingPaneButton({
           }
         />
         <span className="sr-only">
-          {paneConfig.title}
+          {paneConfig.sidebarName ?? paneConfig.title}
           {paneIsOpen !== undefined ? ` pane` : ''}
         </span>
         <Tooltip
@@ -324,7 +329,7 @@ function ModelingPaneButton({
           hoverOnly
         >
           <span className="flex-1">
-            {paneConfig.title}
+            {paneConfig.sidebarName ?? paneConfig.title}
             {disabledText !== undefined ? ` (${disabledText})` : ''}
             {paneIsOpen !== undefined ? ` pane` : ''}
           </span>

src/components/Settings/AllSettingsFields.tsx

@@ -15,7 +15,10 @@ import { SettingsFieldInput } from './SettingsFieldInput'
 import toast from 'react-hot-toast'
 import { APP_VERSION } from 'routes/Settings'
 import { PATHS } from 'lib/paths'
-import { createAndOpenNewProject, getSettingsFolderPaths } from 'lib/desktopFS'
+import {
+  createAndOpenNewTutorialProject,
+  getSettingsFolderPaths,
+} from 'lib/desktopFS'
 import { useDotDotSlash } from 'hooks/useDotDotSlash'
 import { ForwardedRef, forwardRef, useEffect } from 'react'
 import { useLspContext } from 'components/LspProvider'
@@ -79,7 +82,7 @@ export const AllSettingsFields = forwardRef(
           } else {
             // If we're in the global settings, create a new project and navigate
             // to the onboarding start in that project
-            await createAndOpenNewProject({ onProjectOpen, navigate })
+            await createAndOpenNewTutorialProject({ onProjectOpen, navigate })
           }
         }
       }

src/lib/desktopFS.ts

@@ -120,7 +120,7 @@ export async function getSettingsFolderPaths(projectPath?: string) {
   }
 }
 
-export async function createAndOpenNewProject({
+export async function createAndOpenNewTutorialProject({
   onProjectOpen,
   navigate,
 }: {
@@ -144,6 +144,22 @@ export async function createAndOpenNewProject({
     ONBOARDING_PROJECT_NAME,
     nextIndex
   )
+
+  // Delete the tutorial project if it already exists.
+  if (isDesktop()) {
+    if (configuration.settings?.project?.directory === undefined) {
+      return Promise.reject(new Error('configuration settings are undefined'))
+    }
+
+    const fullPath = window.electron.join(
+      configuration.settings.project.directory,
+      name
+    )
+    if (window.electron.exists(fullPath)) {
+      await window.electron.rm(fullPath)
+    }
+  }
+
   const newProject = await createNewProjectDirectory(
     name,
     bracket,

src/routes/Onboarding/Introduction.tsx

@@ -3,7 +3,7 @@ import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { bracket } from 'lib/exampleKcl'
-import { createAndOpenNewProject } from 'lib/desktopFS'
+import { createAndOpenNewTutorialProject } from 'lib/desktopFS'
 import { isDesktop } from 'lib/isDesktop'
 import { useNavigate, useRouteLoaderData } from 'react-router-dom'
 import { codeManager, kclManager } from 'lib/singletons'
@@ -63,7 +63,7 @@ function OnboardingWarningDesktop(props: OnboardingResetWarningProps) {
       fileContext.project.path || null,
       false
     )
-    await createAndOpenNewProject({ onProjectOpen, navigate })
+    await createAndOpenNewTutorialProject({ onProjectOpen, navigate })
     props.setShouldShowWarning(false)
   }