Add ability to create and open URLs to create files

.env.development

@@ -8,3 +8,5 @@ VITE_KC_SKIP_AUTH=false
 VITE_KC_CONNECTION_TIMEOUT_MS=5000
 # ONLY add your token in .env.development.local if you want to skip auth, otherwise this token takes precedence!
 #VITE_KC_DEV_TOKEN="your token from dev.zoo.dev should go in .env.development.local"
+# Add a prod token if you want to use the share URL feature in local dev
+#VITE_KC_PROD_TOKEN="your token from prod.zoo.dev should go in .env.development.local"

e2e/playwright/command-bar-tests.spec.ts

@@ -1,7 +1,8 @@
 import { test, expect } from './zoo-test'
-
-import { getUtils } from './test-utils'
+import * as fsp from 'fs/promises'
+import { executorInputPath, getUtils } from './test-utils'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
+import path from 'path'
 
 test.describe('Command bar tests', () => {
   test('Extrude from command bar selects extrude line after', async ({
@@ -345,4 +346,132 @@ test.describe('Command bar tests', () => {
     await arcToolCommand.click()
     await expect(arcToolButton).toHaveAttribute('aria-pressed', 'true')
   })
+
+  test(`Reacts to query param to open "import from URL" command`, async ({
+    page,
+    cmdBar,
+    editor,
+    homePage,
+  }) => {
+    await test.step(`Prepare and navigate to home page with query params`, async () => {
+      const targetURL = `?create-file&name=test&units=mm&code=ZXh0cnVzaW9uRGlzdGFuY2UgPSAxMg%3D%3D&askToOpenInDesktop`
+      await homePage.expectState({
+        projectCards: [],
+        sortBy: 'last-modified-desc',
+      })
+      await page.goto(page.url() + targetURL)
+      expect(page.url()).toContain(targetURL)
+    })
+
+    await test.step(`Submit the command`, async () => {
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Import file from URL',
+        currentArgKey: 'method',
+        currentArgValue: '',
+        headerArguments: {
+          Method: '',
+          Name: 'test',
+          Code: '1 line',
+        },
+        highlightedHeaderArg: 'method',
+      })
+      await cmdBar.selectOption({ name: 'New Project' }).click()
+      await cmdBar.expectState({
+        stage: 'review',
+        commandName: 'Import file from URL',
+        headerArguments: {
+          Method: 'New project',
+          Name: 'test',
+          Code: '1 line',
+        },
+      })
+      await cmdBar.progressCmdBar()
+    })
+
+    await test.step(`Ensure we created the project and are in the modeling scene`, async () => {
+      await editor.expectEditor.toContain('extrusionDistance = 12')
+    })
+  })
+
+  test(`"import from URL" can add to existing project`, async ({
+    page,
+    cmdBar,
+    editor,
+    homePage,
+    toolbar,
+    context,
+  }) => {
+    await context.folderSetupFn(async (dir) => {
+      const testProjectDir = path.join(dir, 'testProjectDir')
+      await Promise.all([fsp.mkdir(testProjectDir, { recursive: true })])
+      await Promise.all([
+        fsp.copyFile(
+          executorInputPath('cylinder.kcl'),
+          path.join(testProjectDir, 'main.kcl')
+        ),
+      ])
+    })
+    await test.step(`Prepare and navigate to home page with query params`, async () => {
+      const targetURL = `?create-file&name=test&units=mm&code=ZXh0cnVzaW9uRGlzdGFuY2UgPSAxMg%3D%3D&askToOpenInDesktop`
+      await homePage.expectState({
+        projectCards: [
+          {
+            fileCount: 1,
+            title: 'testProjectDir',
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
+      await page.goto(page.url() + targetURL)
+      expect(page.url()).toContain(targetURL)
+    })
+
+    await test.step(`Submit the command`, async () => {
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Import file from URL',
+        currentArgKey: 'method',
+        currentArgValue: '',
+        headerArguments: {
+          Method: '',
+          Name: 'test',
+          Code: '1 line',
+        },
+        highlightedHeaderArg: 'method',
+      })
+      await cmdBar.selectOption({ name: 'Existing Project' }).click()
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Import file from URL',
+        currentArgKey: 'projectName',
+        currentArgValue: '',
+        headerArguments: {
+          Method: 'Existing project',
+          Name: 'test',
+          ProjectName: '',
+          Code: '1 line',
+        },
+        highlightedHeaderArg: 'projectName',
+      })
+      await cmdBar.selectOption({ name: 'testProjectDir' }).click()
+      await cmdBar.expectState({
+        stage: 'review',
+        commandName: 'Import file from URL',
+        headerArguments: {
+          Method: 'Existing project',
+          ProjectName: 'testProjectDir',
+          Name: 'test',
+          Code: '1 line',
+        },
+      })
+      await cmdBar.progressCmdBar()
+    })
+
+    await test.step(`Ensure we created the project and are in the modeling scene`, async () => {
+      await editor.expectEditor.toContain('extrusionDistance = 12')
+      await toolbar.openPane('files')
+      await toolbar.expectFileTreeState(['main.kcl', 'test.kcl'])
+    })
+  })
 })

e2e/playwright/fixtures/cmdBarFixture.ts

@@ -135,4 +135,11 @@ export class CmdBarFixture {
       await promptEditCommand.first().click()
     }
   }
+
+  /**
+   * Select an option from the command bar
+   */
+  selectOption = (options: Parameters<typeof this.page.getByRole>[1]) => {
+    return this.page.getByRole('option', options)
+  }
 }

interface.d.ts

@@ -62,6 +62,7 @@ export interface IElectronAPI {
       TEST_SETTINGS_FILE_KEY: string
       IS_PLAYWRIGHT: string
       VITE_KC_DEV_TOKEN: string
+      VITE_KC_PROD_TOKEN: string
       VITE_KC_API_WS_MODELING_URL: string
       VITE_KC_API_BASE_URL: string
       VITE_KC_SITE_BASE_URL: string

src/App.tsx

@@ -22,13 +22,29 @@ import Gizmo from 'components/Gizmo'
 import { CoreDumpManager } from 'lib/coredump'
 import { UnitsMenu } from 'components/UnitsMenu'
 import { CameraProjectionToggle } from 'components/CameraProjectionToggle'
+import { useCreateFileLinkQuery } from 'hooks/useCreateFileLinkQueryWatcher'
+import { useCommandsContext } from 'hooks/useCommandsContext'
 import { maybeWriteToDisk } from 'lib/telemetry'
 maybeWriteToDisk()
   .then(() => {})
   .catch(() => {})
 
 export function App() {
   const { project, file } = useLoaderData() as IndexLoaderData
+  const { commandBarSend } = useCommandsContext()
+
+  // Keep a lookout for a URL query string that invokes the 'import file from URL' command
+  useCreateFileLinkQuery((argDefaultValues) => {
+    commandBarSend({
+      type: 'Find and select command',
+      data: {
+        groupId: 'projects',
+        name: 'Import file from URL',
+        argDefaultValues,
+      },
+    })
+  })
+
   useRefreshSettings(PATHS.FILE + 'SETTINGS')
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()

src/Router.tsx

@@ -35,7 +35,7 @@ import { CommandBarProvider } from 'components/CommandBar/CommandBarProvider'
 import SettingsAuthProvider from 'components/SettingsAuthProvider'
 import LspProvider from 'components/LspProvider'
 import { KclContextProvider } from 'lang/KclProvider'
-import { BROWSER_PROJECT_NAME } from 'lib/constants'
+import { ASK_TO_OPEN_QUERY_PARAM, BROWSER_PROJECT_NAME } from 'lib/constants'
 import { CoreDumpManager } from 'lib/coredump'
 import { codeManager, engineCommandManager } from 'lib/singletons'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
@@ -47,6 +47,7 @@ import { AppStateProvider } from 'AppState'
 import { reportRejection } from 'lib/trap'
 import { RouteProvider } from 'components/RouteProvider'
 import { ProjectsContextProvider } from 'components/ProjectsContextProvider'
+import { OpenInDesktopAppHandler } from 'components/OpenInDesktopAppHandler'
 
 const createRouter = isDesktop() ? createHashRouter : createBrowserRouter
 
@@ -58,33 +59,44 @@ const router = createRouter([
     /* Make sure auth is the outermost provider or else we will have
      * inefficient re-renders, use the react profiler to see. */
     element: (
-      <CommandBarProvider>
-        <RouteProvider>
-          <SettingsAuthProvider>
-            <LspProvider>
-              <ProjectsContextProvider>
-                <KclContextProvider>
-                  <AppStateProvider>
-                    <MachineManagerProvider>
-                      <Outlet />
-                    </MachineManagerProvider>
-                  </AppStateProvider>
-                </KclContextProvider>
-              </ProjectsContextProvider>
-            </LspProvider>
-          </SettingsAuthProvider>
-        </RouteProvider>
-      </CommandBarProvider>
+      <OpenInDesktopAppHandler>
+        <CommandBarProvider>
+          <RouteProvider>
+            <SettingsAuthProvider>
+              <LspProvider>
+                <ProjectsContextProvider>
+                  <KclContextProvider>
+                    <AppStateProvider>
+                      <MachineManagerProvider>
+                        <Outlet />
+                      </MachineManagerProvider>
+                    </AppStateProvider>
+                  </KclContextProvider>
+                </ProjectsContextProvider>
+              </LspProvider>
+            </SettingsAuthProvider>
+          </RouteProvider>
+        </CommandBarProvider>
+      </OpenInDesktopAppHandler>
     ),
     errorElement: <ErrorPage />,
     children: [
       {
         path: PATHS.INDEX,
-        loader: async () => {
+        loader: async ({ request }) => {
           const onDesktop = isDesktop()
-          return onDesktop
-            ? redirect(PATHS.HOME)
-            : redirect(PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME)
+          const url = new URL(request.url)
+          if (onDesktop) {
+            return redirect(PATHS.HOME + (url.search || ''))
+          } else {
+            const searchParams = new URLSearchParams(url.search)
+            if (!searchParams.has(ASK_TO_OPEN_QUERY_PARAM)) {
+              return redirect(
+                PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME + (url.search || '')
+              )
+            }
+          }
+          return null
         },
       },
       {

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -129,11 +129,13 @@ function CommandArgOptionInput({
           <label
             htmlFor="option-input"
             className="capitalize px-2 py-1 rounded-l bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80"
+            data-testid="cmd-bar-arg-name"
           >
             {argName}
           </label>
           <Combobox.Input
             id="option-input"
+            data-testid="cmd-bar-arg-value"
             ref={inputRef}
             onChange={(event) =>
               !event.target.disabled && setQuery(event.target.value)

src/components/CommandBar/CommandBar.tsx

@@ -22,6 +22,7 @@ export const CommandBar = () => {
 
   // Close the command bar when navigating
   useEffect(() => {
+    if (commandBarState.matches('Closed')) return
     commandBarSend({ type: 'Close' })
   }, [pathname])
 

src/components/CommandComboBox.tsx

@@ -4,6 +4,7 @@ import { useCommandsContext } from 'hooks/useCommandsContext'
 import { Command } from 'lib/commandTypes'
 import { useEffect, useState } from 'react'
 import { CustomIcon } from './CustomIcon'
+import { getActorNextEvents } from 'lib/utils'
 
 function CommandComboBox({
   options,
@@ -73,7 +74,8 @@ function CommandComboBox({
           <Combobox.Option
             key={option.groupId + option.name + (option.displayName || '')}
             value={option}
-            className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
+            className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90 ui-disabled:!text-chalkboard-50"
+            disabled={optionIsDisabled(option)}
           >
             {'icon' in option && option.icon && (
               <CustomIcon name={option.icon} className="w-5 h-5" />
@@ -96,3 +98,11 @@ function CommandComboBox({
 }
 
 export default CommandComboBox
+
+function optionIsDisabled(option: Command): boolean {
+  return (
+    'machineActor' in option &&
+    option.machineActor !== undefined &&
+    !getActorNextEvents(option.machineActor.getSnapshot()).includes(option.name)
+  )
+}