Feature: Release named views to all users (#5814)

* chore: cleanup to get named views released!

* fix: fixed gizmo, client side camera sync and remove DEV flag

* yarp

* chore: implementing E2E tests for creating a named view

* fix: cleaning up and commenting E2E tests for named views

* fix: we did it bois, the skip ceral i zation bricked my E2E test :(

* fix: auto formatter

* fix: snapshot uuid matching because rust will randomly generate thme

* fix: auto fmt

* fix: trying to resolve typescript issues

* fix: handling NamedView vs CameraViewState type checking

* fix: no idea I just mapped export to 3d export because we have no 2d export yet...

* fix: random file I wrote because my editor was too slow

* fix: git merge did not do what I wanted

* A snapshot a day keeps the bugs away! 📷🐛

* fix: linter errors

* A snapshot a day keeps the bugs away! 📷🐛

---------

Co-authored-by: 49fl <ircsurfer33@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Pierre Jacquier <pierre@zoo.dev>

e2e/playwright/named-views.spec.ts

@@ -0,0 +1,292 @@
+import { test, expect } from './zoo-test'
+import { PROJECT_SETTINGS_FILE_NAME } from 'lib/constants'
+import * as fsp from 'fs/promises'
+import { join } from 'path'
+import {
+  createProject,
+  tomlToPerProjectSettings,
+  perProjectsettingsToToml,
+} from './test-utils'
+import { NamedView } from '@rust/kcl-lib/bindings/NamedView'
+
+// Helper function to determine if the file path on disk exists
+// Specifically this is used to check if project.toml exists on disk
+const fileExists = async (path: string) => {
+  return !!(await fsp
+    .stat(path)
+    .then((_) => true)
+    .catch((_) => false))
+}
+
+// Here are a few uuids.
+// When created named views rust will auto generate uuids and they will
+// never match the snapshots. Overwrite them in memory to these
+// values to have them match the snapshots.
+const uuid1: string = '0656fb1a-9640-473e-b334-591dc70c0138'
+const uuid2: string = 'c810cf04-c6cc-4a4a-8b11-17bf445dcab7'
+const uuid3: string = 'cfecbfee-48a6-4561-b96d-ffbe5678bb7d'
+
+// Look up the named view by name and then rewrite it with the same uuid each time
+const nameToUuid: Map<string, string> = new Map()
+nameToUuid.set('uuid1', uuid1)
+nameToUuid.set('uuid2', uuid2)
+nameToUuid.set('uuid3', uuid3)
+
+/**
+ * Given the project.toml string, overwrite the named views to be the constant uuid
+ * values to match the snapshots. The uuids are randomly generated
+ */
+function tomlStringOverWriteNamedViewUuids(toml: string): string {
+  const settings = tomlToPerProjectSettings(toml)
+  const namedViews = settings.settings?.app?.named_views
+  if (namedViews) {
+    const entries = Object.entries(namedViews)
+    const remappedNamedViews: { [key: string]: NamedView } = {}
+    entries.forEach(([_, value]) => {
+      if (value) {
+        // {name:'uuid1'} -> uuid1 lookup
+        const staticUuid = nameToUuid.get(value.name)
+        if (staticUuid) {
+          remappedNamedViews[staticUuid] = value
+        }
+      }
+    })
+    if (settings && settings.settings && settings.settings.app) {
+      settings.settings.app.named_views = remappedNamedViews
+    }
+  }
+  return perProjectsettingsToToml(settings)
+}
+
+test.describe('Named view tests', () => {
+  test('Verify project.toml is not created', async ({ page }, testInfo) => {
+    // Create project and load it
+    const projectName = 'named-views'
+    await createProject({ name: projectName, page })
+
+    // Generate file paths for project.toml
+    const projectDirName = testInfo.outputPath('electron-test-projects-dir')
+    const tempProjectSettingsFilePath = join(
+      projectDirName,
+      projectName,
+      PROJECT_SETTINGS_FILE_NAME
+    )
+
+    // project.toml should not exist on initial project creation
+    let exists = await fileExists(tempProjectSettingsFilePath)
+    expect(exists).toBe(false)
+  })
+  test('Verify named view gets created', async ({
+    cmdBar,
+    scene,
+    page,
+  }, testInfo) => {
+    const projectName = 'named-views'
+    const myNamedView = 'uuid1'
+
+    // Create and load project
+    await createProject({ name: projectName, page })
+    await scene.waitForExecutionDone()
+
+    // Create named view
+    const projectDirName = testInfo.outputPath('electron-test-projects-dir')
+    await cmdBar.openCmdBar()
+    await cmdBar.chooseCommand('create named view')
+    await cmdBar.argumentInput.fill(myNamedView)
+    await cmdBar.progressCmdBar(false)
+
+    // Generate paths for the project.toml
+    const tempProjectSettingsFilePath = join(
+      projectDirName,
+      projectName,
+      PROJECT_SETTINGS_FILE_NAME
+    )
+
+    // Expect project.toml to be generated on disk since a named view was created
+    await expect(async () => {
+      let exists = await fileExists(tempProjectSettingsFilePath)
+      expect(exists).toBe(true)
+    }).toPass()
+
+    // Read project.toml into memory
+    let tomlString = await fsp.readFile(tempProjectSettingsFilePath, 'utf-8')
+    // Rewrite the uuids in the named views to match snapshot otherwise they will be randomly generated from rust and break
+    tomlString = tomlStringOverWriteNamedViewUuids(tomlString)
+
+    // Write the entire tomlString to a snapshot.
+    // There are many key/value pairs to check this is a safer match.
+    expect(tomlString).toMatchSnapshot('verify-named-view-gets-created')
+  })
+  test('Verify named view gets deleted', async ({
+    cmdBar,
+    scene,
+    page,
+  }, testInfo) => {
+    const projectName = 'named-views'
+    const myNamedView1 = 'uuid1'
+    const myNamedView2 = 'uuid2'
+
+    // Create project and go into the project
+    await createProject({ name: projectName, page })
+    await scene.waitForExecutionDone()
+
+    // Create a new named view
+    await cmdBar.openCmdBar()
+    await cmdBar.chooseCommand('create named view')
+    await cmdBar.argumentInput.fill(myNamedView1)
+    await cmdBar.progressCmdBar(false)
+
+    // Generate file paths for project.toml
+    const projectDirName = testInfo.outputPath('electron-test-projects-dir')
+    const tempProjectSettingsFilePath = join(
+      projectDirName,
+      projectName,
+      PROJECT_SETTINGS_FILE_NAME
+    )
+
+    // Except the project.toml to be written to disk since a named view was created
+    await expect(async () => {
+      let exists = await fileExists(tempProjectSettingsFilePath)
+      expect(exists).toBe(true)
+    }).toPass()
+
+    // Read project.toml into memory
+    let tomlString = await fsp.readFile(tempProjectSettingsFilePath, 'utf-8')
+    // Rewrite the uuids in the named views to match snapshot otherwise they will be randomly generated from rust and break
+    tomlString = tomlStringOverWriteNamedViewUuids(tomlString)
+
+    // Write the entire tomlString to a snapshot.
+    // There are many key/value pairs to check this is a safer match.
+    expect(tomlString).toMatchSnapshot('verify-named-view-gets-created')
+
+    // Delete a named view
+    await cmdBar.openCmdBar()
+    await cmdBar.chooseCommand('delete named view')
+    cmdBar.selectOption({ name: myNamedView2 })
+    await cmdBar.progressCmdBar(false)
+
+    // Read project.toml into memory again since we deleted a named view
+    tomlString = await fsp.readFile(tempProjectSettingsFilePath, 'utf-8')
+    // Rewrite the uuids in the named views to match snapshot otherwise they will be randomly generated from rust and break
+    tomlString = tomlStringOverWriteNamedViewUuids(tomlString)
+
+    // // Write the entire tomlString to a snapshot.
+    // // There are many key/value pairs to check this is a safer match.
+    expect(tomlString).toMatchSnapshot('verify-named-view-gets-deleted')
+  })
+  test('Verify named view gets loaded', async ({
+    cmdBar,
+    scene,
+    page,
+  }, testInfo) => {
+    const projectName = 'named-views'
+    const myNamedView = 'uuid1'
+
+    // Create project and go into the project
+    await createProject({ name: projectName, page })
+    await scene.waitForExecutionDone()
+
+    // Create a new named view
+    await cmdBar.openCmdBar()
+    await cmdBar.chooseCommand('create named view')
+    await cmdBar.argumentInput.fill(myNamedView)
+    await cmdBar.progressCmdBar(false)
+
+    // Generate file paths for project.toml
+    const projectDirName = testInfo.outputPath('electron-test-projects-dir')
+    const tempProjectSettingsFilePath = join(
+      projectDirName,
+      projectName,
+      PROJECT_SETTINGS_FILE_NAME
+    )
+
+    // Except the project.toml to be written to disk since a named view was created
+    await expect(async () => {
+      let exists = await fileExists(tempProjectSettingsFilePath)
+      expect(exists).toBe(true)
+    }).toPass()
+
+    // Read project.toml into memory
+    let tomlString = await fsp.readFile(tempProjectSettingsFilePath, 'utf-8')
+    // Rewrite the uuids in the named views to match snapshot otherwise they will be randomly generated from rust and break
+    tomlString = tomlStringOverWriteNamedViewUuids(tomlString)
+
+    // Write the entire tomlString to a snapshot.
+    // There are many key/value pairs to check this is a safer match.
+    expect(tomlString).toMatchSnapshot('verify-named-view-gets-created')
+
+    // Create a load a named view
+    await cmdBar.openCmdBar()
+    await cmdBar.chooseCommand('load named view')
+    await cmdBar.argumentInput.fill(myNamedView)
+    await cmdBar.progressCmdBar(false)
+
+    // Check the toast appeared
+    await expect(
+      page.getByText(`Named view ${myNamedView} loaded.`)
+    ).toBeVisible()
+  })
+  test('Verify two named views get created', async ({
+    cmdBar,
+    scene,
+    page,
+  }, testInfo) => {
+    const projectName = 'named-views'
+    const myNamedView1 = 'uuid1'
+    const myNamedView2 = 'uuid2'
+
+    // Create and load project
+    await createProject({ name: projectName, page })
+    await scene.waitForExecutionDone()
+
+    // Create named view
+    const projectDirName = testInfo.outputPath('electron-test-projects-dir')
+    await cmdBar.openCmdBar()
+    await cmdBar.chooseCommand('create named view')
+    await cmdBar.argumentInput.fill(myNamedView1)
+    await cmdBar.progressCmdBar(false)
+
+    await page.waitForTimeout(1000)
+
+    const orbitMouseStart = { x: 800, y: 130 }
+    const orbitMouseEnd = { x: 0, y: 130 }
+    await page.mouse.move(orbitMouseStart.x, orbitMouseStart.y)
+    await page.mouse.down({ button: 'middle' })
+    await page.mouse.move(orbitMouseEnd.x, orbitMouseEnd.y, {
+      steps: 3,
+    })
+    await page.mouse.up({ button: 'middle' })
+
+    await page.waitForTimeout(1000)
+
+    await cmdBar.openCmdBar()
+    await cmdBar.chooseCommand('create named view')
+    await cmdBar.argumentInput.fill(myNamedView2)
+    await cmdBar.progressCmdBar(false)
+
+    // Wait a moment for the project.toml to get written to disk with the new view point
+    await page.waitForTimeout(1000)
+
+    // Generate paths for the project.toml
+    const tempProjectSettingsFilePath = join(
+      projectDirName,
+      projectName,
+      PROJECT_SETTINGS_FILE_NAME
+    )
+
+    // Expect project.toml to be generated on disk since a named view was created
+    await expect(async () => {
+      let exists = await fileExists(tempProjectSettingsFilePath)
+      expect(exists).toBe(true)
+    }).toPass()
+
+    // Read project.toml into memory
+    let tomlString = await fsp.readFile(tempProjectSettingsFilePath, 'utf-8')
+    // Rewrite the uuids in the named views to match snapshot otherwise they will be randomly generated from rust and break
+    tomlString = tomlStringOverWriteNamedViewUuids(tomlString)
+
+    // Write the entire tomlString to a snapshot.
+    // There are many key/value pairs to check this is a safer match.
+    expect(tomlString).toMatchSnapshot('verify-two-named-view-gets-created')
+  })
+})

e2e/playwright/named-views.spec.ts-snapshots/verify-named-view-gets-created-chromium-linux

@@ -0,0 +1,16 @@
+[settings]
+modeling = { }
+text_editor = { }
+command_bar = { }
+
+[settings.app.named_views.0656fb1a-9640-473e-b334-591dc70c0138]
+name = "uuid1"
+eye_offset = 1_378.0059
+fov_y = 45
+is_ortho = false
+ortho_scale_enabled = true
+ortho_scale_factor = 1.6
+pivot_position = [ 0, 0, 0 ]
+pivot_rotation = [ 0.5380994, 0.0, 0.0, 0.8428814 ]
+world_coord_system = "right_handed_up_z"
+version = 1

e2e/playwright/named-views.spec.ts-snapshots/verify-named-view-gets-deleted-chromium-linux

@@ -0,0 +1,16 @@
+[settings]
+modeling = { }
+text_editor = { }
+command_bar = { }
+
+[settings.app.named_views.0656fb1a-9640-473e-b334-591dc70c0138]
+name = "uuid1"
+eye_offset = 1_378.0059
+fov_y = 45
+is_ortho = false
+ortho_scale_enabled = true
+ortho_scale_factor = 1.6
+pivot_position = [ 0, 0, 0 ]
+pivot_rotation = [ 0.5380994, 0.0, 0.0, 0.8428814 ]
+world_coord_system = "right_handed_up_z"
+version = 1

e2e/playwright/named-views.spec.ts-snapshots/verify-two-named-view-gets-created-chromium-linux

@@ -0,0 +1,28 @@
+[settings]
+modeling = { }
+text_editor = { }
+command_bar = { }
+
+[settings.app.named_views.0656fb1a-9640-473e-b334-591dc70c0138]
+name = "uuid1"
+eye_offset = 1_378.0059
+fov_y = 45
+is_ortho = false
+ortho_scale_enabled = true
+ortho_scale_factor = 1.6
+pivot_position = [ 0, 0, 0 ]
+pivot_rotation = [ 0.5380994, 0.0, 0.0, 0.8428814 ]
+world_coord_system = "right_handed_up_z"
+version = 1
+
+[settings.app.named_views.c810cf04-c6cc-4a4a-8b11-17bf445dcab7]
+name = "uuid2"
+eye_offset = 1_378.0059
+fov_y = 45
+is_ortho = false
+ortho_scale_enabled = true
+ortho_scale_factor = 1.6
+pivot_position = [ 1_826.5239, 0.0, 0.0 ]
+pivot_rotation = [ 0.5380994, 0.0, 0.0, 0.8428814 ]
+world_coord_system = "right_handed_up_z"
+version = 1

e2e/playwright/test-utils.ts

@@ -26,6 +26,7 @@ import { isArray } from 'lib/utils'
 import { reportRejection } from 'lib/trap'
 import { DeepPartial } from 'lib/types'
 import { Configuration } from 'lang/wasm'
+import { ProjectConfiguration } from '@rust/kcl-lib/bindings/ProjectConfiguration'
 
 const toNormalizedCode = (text: string) => {
   return text.replace(/\s+/g, '')
@@ -761,7 +762,7 @@ export interface Paths {
 }
 
 export const doExport = async (
-  output: Models['OutputFormat_type'],
+  output: Models['OutputFormat3d_type'],
   rootDir: string,
   page: Page,
   exportFrom: 'dropdown' | 'sidebarButton' | 'commandBar' = 'dropdown'
@@ -1125,3 +1126,15 @@ export function settingsToToml(settings: DeepPartial<Configuration>) {
 export function tomlToSettings(toml: string): DeepPartial<Configuration> {
   return TOML.parse(toml)
 }
+
+export function tomlToPerProjectSettings(
+  toml: string
+): DeepPartial<ProjectConfiguration> {
+  return TOML.parse(toml)
+}
+
+export function perProjectsettingsToToml(
+  settings: DeepPartial<ProjectConfiguration>
+) {
+  return TOML.stringify(settings as any)
+}