Add E2E test for importing file from URL

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

@@ -2,6 +2,7 @@ import { test, expect } from './zoo-test'
 
 import { getUtils } from './test-utils'
 import { KCL_DEFAULT_LENGTH } from 'lib/constants'
+import { url } from 'inspector'
 
 test.describe('Command bar tests', () => {
   test('Extrude from command bar selects extrude line after', async ({
@@ -345,4 +346,51 @@ 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')
+    })
+  })
 })

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)
+  }
 }

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/lib/commandBarConfigs/projectsCommandConfig.ts

@@ -152,7 +152,8 @@ export const projectsCommandBarConfig: StateMachineCommandSetConfig<
         required: true,
         skip: true,
         valueSummary(value) {
-          return value?.trim().split('\n').length + ' lines'
+          const lineCount = value?.trim().split('\n').length
+          return `${lineCount} line${lineCount === 1 ? '' : 's'}`
         },
       },
       units: {

src/lib/constants.ts

@@ -146,8 +146,8 @@ export const SIDEBAR_BUTTON_SUFFIX = '-pane-button'
 /** Custom URL protocol our desktop registers */
 export const ZOO_STUDIO_PROTOCOL = 'zoo-studio:'
 
-/** 
+/**
  * A query parameter that triggers a modal
  * to "open in desktop app" when present in the URL
-*/
+ */
 export const ASK_TO_OPEN_QUERY_PARAM = 'askToOpenInDesktop'

src/lib/links.ts

@@ -1,5 +1,9 @@
 import { UnitLength_type } from '@kittycad/lib/dist/types/src/models'
-import { ASK_TO_OPEN_QUERY_PARAM, CREATE_FILE_URL_PARAM, PROD_APP_URL } from './constants'
+import {
+  ASK_TO_OPEN_QUERY_PARAM,
+  CREATE_FILE_URL_PARAM,
+  PROD_APP_URL,
+} from './constants'
 import { stringToBase64 } from './base64'
 import { DEV } from 'env'
 export interface FileLinkParams {
@@ -11,8 +15,8 @@ export interface FileLinkParams {
 /**
  * Creates a URL with the necessary query parameters to trigger
  * the "Import file from URL" command in the app.
- * 
+ *
- * With the additional step of asking the user if they want to 
+ * With the additional step of asking the user if they want to
  * open the URL in the desktop app.
  */
 export function createCreateFileUrl({ code, name, units }: FileLinkParams) {