Add point-and-click Insert from local project files (#6129)

* WIP: Add point-and-click Import for geometry
Will eventually fix #6120
Right now the whole loop is there but the codemod doesn't work yet

* Better pathToNOde, log on non-working cm dispatch call

* Add workaround to updateModelingState not working

* Back to updateModelingState with a skip flag

* Better todo

* Change working from Import to Insert, cleanups

* Sister command in kclCommands to populate file options

* Improve path selector

* Unsure: move importAstMod to kclCommands onSubmit 😶

* Add e2e test

* Clean up for review

* Add native file menu entry and test

* No await yo lint said so

* @lrev-Dev's suggestion to remove a comment

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

* Update to scene.settled(cmdBar)

* Lint

---------

Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

src/components/FileMachineProvider.tsx

@@ -459,10 +459,30 @@ export const FileMachineProvider = ({
             name: sample.title,
           })),
         },
+        specialPropsForInsertCommand: {
+          providedOptions: (isDesktop() && project?.children
+            ? project.children
+            : []
+          ).flatMap((v) => {
+            // TODO: add support for full tree traversal when KCL support subdir imports
+            const relativeFilePath = v.path.replace(
+              project?.path + window.electron.sep,
+              ''
+            )
+            const isDirectory = v.children
+            const isCurrentFile = v.path === file?.path
+            return isDirectory || isCurrentFile
+              ? []
+              : {
+                  name: relativeFilePath,
+                  value: relativeFilePath,
+                }
+          }),
+        },
       }).filter(
         (command) => kclSamples.length || command.name !== 'open-kcl-example'
       ),
-    [codeManager, kclManager, send, kclSamples]
+    [codeManager, kclManager, send, kclSamples, project, file]
   )
 
   useEffect(() => {

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -14,6 +14,7 @@ import type {
 } from '@src/components/ModelingSidebar/ModelingPanes'
 import { sidebarPanes } from '@src/components/ModelingSidebar/ModelingPanes'
 import Tooltip from '@src/components/Tooltip'
+import { DEV } from '@src/env'
 import { useModelingContext } from '@src/hooks/useModelingContext'
 import { useKclContext } from '@src/lang/KclProvider'
 import { SIDEBAR_BUTTON_SUFFIX } from '@src/lib/constants'
@@ -21,6 +22,7 @@ import { isDesktop } from '@src/lib/isDesktop'
 import { useSettings } from '@src/machines/appMachine'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'
+import { IS_NIGHTLY_OR_DEBUG } from '@src/routes/utils'
 
 interface ModelingSidebarProps {
   paneOpacity: '' | 'opacity-20' | 'opacity-40'
@@ -60,6 +62,19 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
   )
 
   const sidebarActions: SidebarAction[] = [
+    {
+      id: 'insert',
+      title: 'Insert from project file',
+      sidebarName: 'Insert from project file',
+      icon: 'import',
+      keybinding: 'Ctrl + Shift + I',
+      hide: (a) => a.platform === 'web' || !(DEV || IS_NIGHTLY_OR_DEBUG),
+      action: () =>
+        commandBarActor.send({
+          type: 'Find and select command',
+          data: { name: 'Insert', groupId: 'code' },
+        }),
+    },
     {
       id: 'export',
       title: 'Export part',

src/components/ProjectSidebarMenu.tsx

@@ -113,6 +113,7 @@ function ProjectMenuPopover({
   const commands = useSelector(commandBarActor, commandsSelector)
 
   const { onProjectClose } = useLspContext()
+  const insertCommandInfo = { name: 'Insert', groupId: 'code' }
   const exportCommandInfo = { name: 'Export', groupId: 'modeling' }
   const makeCommandInfo = { name: 'Make', groupId: 'modeling' }
   const shareCommandInfo = { name: 'share-file-link', groupId: 'code' }
@@ -145,6 +146,29 @@ function ProjectMenuPopover({
           },
         },
         'break',
+        {
+          id: 'insert',
+          Element: 'button',
+          children: (
+            <>
+              <span>Insert from project file</span>
+              {!findCommand(insertCommandInfo) && (
+                <Tooltip
+                  position="right"
+                  wrapperClassName="!max-w-none min-w-fit"
+                >
+                  Awaiting engine connection
+                </Tooltip>
+              )}
+            </>
+          ),
+          disabled: !findCommand(insertCommandInfo),
+          onClick: () =>
+            commandBarActor.send({
+              type: 'Find and select command',
+              data: insertCommandInfo,
+            }),
+        },
         {
           id: 'export',
           Element: 'button',