Show toolbar tooltips on hover only, hide when dropdowns are open (#5109)

* Show toolbar tooltips on hover only, hide when dropdowns are open

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* Re-run CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/cargo-bench.yml

@@ -1,44 +0,0 @@
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - '**.rs'
-      - '**/Cargo.toml'
-      - '**/Cargo.lock'
-      - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-bench.yml
-  pull_request:
-    paths:
-      - '**.rs'
-      - '**/Cargo.toml'
-      - '**/Cargo.lock'
-      - '**/rust-toolchain.toml'
-      - .github/workflows/cargo-bench.yml
-  workflow_dispatch:
-permissions: read-all
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
-name: cargo bench
-jobs:
-  cargo-bench:
-    name: Benchmark with iai
-    runs-on: ubuntu-latest-8-cores
-    steps:
-      - uses: actions/checkout@v4
-      - uses: dtolnay/rust-toolchain@stable
-      - name: Install dependencies
-        run: |
-          cargo install cargo-criterion
-          sudo apt update
-          sudo apt install -y valgrind
-      - name: Rust Cache
-        uses: Swatinem/rust-cache@v2.6.1
-      - name: Benchmark kcl library
-        shell: bash
-        run: |-
-          cd src/wasm-lib/kcl; cargo bench --all-features -- iai
-        env:
-          KITTYCAD_API_TOKEN: ${{secrets.KITTYCAD_API_TOKEN}}
-

e2e/playwright/code-pane-and-errors.spec.ts

@@ -280,7 +280,7 @@ test(
 
       await expect(page.getByRole('link', { name: 'bracket' })).toBeVisible()
       await expect(page.getByText('router-template-slate')).toBeVisible()
-      await expect(page.getByText('New Project')).toBeVisible()
+      await expect(page.getByText('Create project')).toBeVisible()
     })
 
     await test.step('Opening the router-template project should load', async () => {

e2e/playwright/fixtures/cmdBarFixture.ts

@@ -135,4 +135,20 @@ export class CmdBarFixture {
       await promptEditCommand.first().click()
     }
   }
+
+  get cmdSearchInput() {
+    return this.page.getByTestId('cmd-bar-search')
+  }
+
+  get argumentInput() {
+    return this.page.getByTestId('cmd-bar-arg-value')
+  }
+
+  get cmdOptions() {
+    return this.page.getByTestId('cmd-bar-option')
+  }
+
+  chooseCommand = async (commandName: string) => {
+    await this.cmdOptions.getByText(commandName).click()
+  }
 }

e2e/playwright/fixtures/homePageFixture.ts

@@ -103,7 +103,7 @@ export class HomePageFixture {
       .toEqual(expectedState)
   }
 
-  createAndGoToProject = async (projectTitle: string) => {
+  createAndGoToProject = async (projectTitle = 'project-$nnn') => {
     await expect(this.projectSection).not.toHaveText('Loading your Projects...')
     await this.projectButtonNew.click()
     await this.projectTextName.click()

e2e/playwright/fixtures/toolbarFixture.ts

@@ -63,6 +63,10 @@ export class ToolbarFixture {
     this.exeIndicator = page.getByTestId('model-state-indicator-execution-done')
   }
 
+  get logoLink() {
+    return this.page.getByTestId('app-logo')
+  }
+
   startSketchPlaneSelection = async () =>
     doAndWaitForImageDiff(this.page, () => this.startSketchBtn.click(), 500)
 

e2e/playwright/projects.spec.ts

@@ -172,7 +172,7 @@ test(
       await expect(page.getByRole('link', { name: 'bracket' })).toBeVisible()
       await expect(page.getByText('broken-code')).toBeVisible()
       await expect(page.getByText('bracket')).toBeVisible()
-      await expect(page.getByText('New Project')).toBeVisible()
+      await expect(page.getByText('Create project')).toBeVisible()
     })
     await test.step('opening broken code project should clear the scene and show the error', async () => {
       // Go back home.
@@ -253,7 +253,7 @@ test(
       await expect(page.getByRole('link', { name: 'bracket' })).toBeVisible()
       await expect(page.getByText('empty')).toBeVisible()
       await expect(page.getByText('bracket')).toBeVisible()
-      await expect(page.getByText('New Project')).toBeVisible()
+      await expect(page.getByText('Create project')).toBeVisible()
     })
     await test.step('opening empty code project should clear the scene', async () => {
       // Go back home.
@@ -985,6 +985,126 @@ test.describe(`Project management commands`, () => {
       })
     }
   )
+  test(`Create a new project with a colliding name`, async ({
+    context,
+    homePage,
+    toolbar,
+    cmdBar,
+  }) => {
+    const projectName = 'test-project'
+    await test.step(`Setup`, async () => {
+      await context.folderSetupFn(async (dir) => {
+        const projectDir = path.join(dir, projectName)
+        await Promise.all([fsp.mkdir(projectDir, { recursive: true })])
+        await Promise.all([
+          fsp.copyFile(
+            executorInputPath('router-template-slate.kcl'),
+            path.join(projectDir, 'main.kcl')
+          ),
+        ])
+      })
+      await homePage.expectState({
+        projectCards: [
+          {
+            title: projectName,
+            fileCount: 1,
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
+    })
+
+    await test.step('Create a new project with the same name', async () => {
+      await cmdBar.openCmdBar()
+      await cmdBar.chooseCommand('create project')
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Create project',
+        currentArgKey: 'name',
+        currentArgValue: '',
+        headerArguments: {
+          Name: '',
+        },
+        highlightedHeaderArg: 'name',
+      })
+      await cmdBar.argumentInput.fill(projectName)
+      await cmdBar.progressCmdBar()
+    })
+
+    await test.step(`Check the project was created with a non-colliding name`, async () => {
+      await toolbar.logoLink.click()
+      await homePage.expectState({
+        projectCards: [
+          {
+            title: projectName + '-1',
+            fileCount: 1,
+          },
+          {
+            title: projectName,
+            fileCount: 1,
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
+    })
+
+    await test.step('Create another project with the same name', async () => {
+      await cmdBar.openCmdBar()
+      await cmdBar.chooseCommand('create project')
+      await cmdBar.expectState({
+        stage: 'arguments',
+        commandName: 'Create project',
+        currentArgKey: 'name',
+        currentArgValue: '',
+        headerArguments: {
+          Name: '',
+        },
+        highlightedHeaderArg: 'name',
+      })
+      await cmdBar.argumentInput.fill(projectName)
+      await cmdBar.progressCmdBar()
+    })
+
+    await test.step(`Check the second project was created with a non-colliding name`, async () => {
+      await toolbar.logoLink.click()
+      await homePage.expectState({
+        projectCards: [
+          {
+            title: projectName + '-2',
+            fileCount: 1,
+          },
+          {
+            title: projectName + '-1',
+            fileCount: 1,
+          },
+          {
+            title: projectName,
+            fileCount: 1,
+          },
+        ],
+        sortBy: 'last-modified-desc',
+      })
+    })
+  })
+})
+
+test(`Create a few projects using the default project name`, async ({
+  homePage,
+  toolbar,
+}) => {
+  for (let i = 0; i < 12; i++) {
+    await test.step(`Create project ${i}`, async () => {
+      await homePage.expectState({
+        projectCards: Array.from({ length: i }, (_, i) => ({
+          title: `project-${i.toString().padStart(3, '0')}`,
+          fileCount: 1,
+        })).toReversed(),
+        sortBy: 'last-modified-desc',
+      })
+      await homePage.createAndGoToProject()
+      await toolbar.logoLink.click()
+    })
+  }
 })
 
 test(
@@ -1391,7 +1511,7 @@ extrude001 = extrude(200, sketch001)`)
     await page.getByTestId('app-logo').click()
 
     await expect(
-      page.getByRole('button', { name: 'New project' })
+      page.getByRole('button', { name: 'Create project' })
     ).toBeVisible()
 
     for (let i = 1; i <= 10; i++) {
@@ -1465,7 +1585,7 @@ test(
 
       await expect(page.getByRole('link', { name: 'bracket' })).toBeVisible()
       await expect(page.getByText('router-template-slate')).toBeVisible()
-      await expect(page.getByText('New Project')).toBeVisible()
+      await expect(page.getByText('Create project')).toBeVisible()
     })
 
     await test.step('Opening the router-template project should load the stream', async () => {
@@ -1494,7 +1614,7 @@ test(
 
       await expect(page.getByRole('link', { name: 'bracket' })).toBeVisible()
       await expect(page.getByText('router-template-slate')).toBeVisible()
-      await expect(page.getByText('New Project')).toBeVisible()
+      await expect(page.getByText('Create project')).toBeVisible()
     })
   }
 )

e2e/playwright/test-utils.ts

@@ -1078,7 +1078,7 @@ export async function createProject({
   returnHome?: boolean
 }) {
   await test.step(`Create project and navigate to it`, async () => {
-    await page.getByRole('button', { name: 'New project' }).click()
+    await page.getByRole('button', { name: 'Create project' }).click()
     await page.getByRole('textbox', { name: 'Name' }).fill(name)
     await page.getByRole('button', { name: 'Continue' }).click()
 

src/Toolbar.tsx

@@ -210,6 +210,7 @@ export function Toolbar({
                 <ToolbarItemTooltip
                   itemConfig={maybeIconConfig[0]}
                   configCallbackProps={configCallbackProps}
+                  className="ui-open:!hidden"
                 />
               </ActionButtonDropdown>
             )
@@ -277,9 +278,11 @@ export function Toolbar({
 const ToolbarItemTooltip = memo(function ToolbarItemContents({
   itemConfig,
   configCallbackProps,
+  className,
 }: {
   itemConfig: ToolbarItemResolved
   configCallbackProps: ToolbarItemCallbackProps
+  className?: string
 }) {
   const { state } = useModelingContext()
 
@@ -305,8 +308,9 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
           ? ({ '-webkit-app-region': 'no-drag' } as React.CSSProperties)
           : {}
       }
+      hoverOnly
       position="bottom"
-      wrapperClassName="!p-4 !pointer-events-auto"
+      wrapperClassName={'!p-4 !pointer-events-auto ' + className}
       contentClassName="!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch"
     >
       <div className="rounded-top flex items-center gap-2 pt-3 pb-2 px-2 bg-chalkboard-20/50 dark:bg-chalkboard-80/50">

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -134,6 +134,7 @@ function CommandArgOptionInput({
           </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/CommandComboBox.tsx

@@ -52,6 +52,7 @@ function CommandComboBox({
           className="w-5 h-5 bg-primary/10 dark:bg-primary text-primary dark:text-inherit"
         />
         <Combobox.Input
+          data-testid="cmd-bar-search"
           onChange={(event) => setQuery(event.target.value)}
           className="w-full bg-transparent focus:outline-none selection:bg-primary/20 dark:selection:bg-primary/40 dark:focus:outline-none"
           onKeyDown={(event) => {
@@ -85,6 +86,7 @@ function CommandComboBox({
             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 ui-disabled:!text-chalkboard-50"
             disabled={optionIsDisabled(option)}
+            data-testid={`cmd-bar-option`}
           >
             {'icon' in option && option.icon && (
               <CustomIcon name={option.icon} className="w-5 h-5" />

src/components/ProjectsContextProvider.tsx

@@ -18,6 +18,7 @@ import {
   getNextProjectIndex,
   interpolateProjectNameWithIndex,
   doesProjectNameNeedInterpolated,
+  getUniqueProjectName,
 } from 'lib/desktopFS'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import useStateMachineCommands from 'hooks/useStateMachineCommands'
@@ -195,16 +196,12 @@ const ProjectsContextDesktop = ({
               : settings.projects.defaultProjectName.current
           ).trim()
 
-          if (doesProjectNameNeedInterpolated(name)) {
-            const nextIndex = getNextProjectIndex(name, input.projects)
-            name = interpolateProjectNameWithIndex(name, nextIndex)
-          }
-
-          await createNewProjectDirectory(name)
+          const uniqueName = getUniqueProjectName(name, input.projects)
+          await createNewProjectDirectory(uniqueName)
 
           return {
-            message: `Successfully created "${name}"`,
-            name,
+            message: `Successfully created "${uniqueName}"`,
+            name: uniqueName,
           }
         }),
         renameProject: fromPromise(async ({ input }) => {

src/lib/desktopFS.test.ts

@@ -0,0 +1,58 @@
+import { getUniqueProjectName } from './desktopFS'
+import { FileEntry } from './project'
+
+/** Create a dummy project */
+function project(name: string, children?: FileEntry[]): FileEntry {
+  return {
+    name,
+    children: children || [
+      { name: 'main.kcl', children: null, path: 'main.kcl' },
+    ],
+    path: `/projects/${name}`,
+  }
+}
+
+describe(`Getting unique project names`, () => {
+  it(`should return the same name if no conflicts`, () => {
+    const projectName = 'new-project'
+    const projects = [project('existing-project'), project('another-project')]
+    const result = getUniqueProjectName(projectName, projects)
+    expect(result).toBe(projectName)
+  })
+  it(`should return a unique name if there is a conflict`, () => {
+    const projectName = 'existing-project'
+    const projects = [project('existing-project'), project('another-project')]
+    const result = getUniqueProjectName(projectName, projects)
+    expect(result).toBe('existing-project-1')
+  })
+  it(`should increment an ending index until a unique one is found`, () => {
+    const projectName = 'existing-project-1'
+    const projects = [
+      project('existing-project'),
+      project('existing-project-1'),
+      project('existing-project-2'),
+    ]
+    const result = getUniqueProjectName(projectName, projects)
+    expect(result).toBe('existing-project-3')
+  })
+  it(`should prefer the formatting of the index identifier if present`, () => {
+    const projectName = 'existing-project-$nn'
+    const projects = [
+      project('existing-project'),
+      project('existing-project-1'),
+      project('existing-project-2'),
+    ]
+    const result = getUniqueProjectName(projectName, projects)
+    expect(result).toBe('existing-project-03')
+  })
+  it(`be able to get an incrementing index regardless of padding zeroes`, () => {
+    const projectName = 'existing-project-$nn'
+    const projects = [
+      project('existing-project'),
+      project('existing-project-01'),
+      project('existing-project-2'),
+    ]
+    const result = getUniqueProjectName(projectName, projects)
+    expect(result).toBe('existing-project-03')
+  })
+})

src/lib/desktopFS.ts

@@ -54,8 +54,10 @@ export function getNextProjectIndex(
   const matches = projects.map((project) => project.name?.match(regex))
   const indices = matches
     .filter(Boolean)
-    .map((match) => match![1])
-    .map(Number)
+    .map((match) => (match !== null ? match[1] : '-1'))
+    .map((maybeMatchIndex) => {
+      return parseInt(maybeMatchIndex || '0', 10)
+    })
   const maxIndex = Math.max(...indices, -1)
   return maxIndex + 1
 }
@@ -83,6 +85,33 @@ export function doesProjectNameNeedInterpolated(projectName: string) {
   return projectName.includes(INDEX_IDENTIFIER)
 }
 
+/**
+ * Given a target name, which may include our magic index interpolation string,
+ * and a list of projects, return a unique name that doesn't conflict with any
+ * of the existing projects, incrementing any ending number if necessary.
+ * @param name
+ * @param projects
+ * @returns
+ */
+export function getUniqueProjectName(name: string, projects: FileEntry[]) {
+  // The name may have our magic index interpolation string in it
+  const needsInterpolation = doesProjectNameNeedInterpolated(name)
+
+  if (needsInterpolation) {
+    const nextIndex = getNextProjectIndex(name, projects)
+    return interpolateProjectNameWithIndex(name, nextIndex)
+  } else {
+    let newName = name
+    while (projects.some((project) => project.name === newName)) {
+      const nameEndsWithNumber = newName.match(/\d+$/)
+      newName = nameEndsWithNumber
+        ? newName.replace(/\d+$/, (num) => `${parseInt(num, 10) + 1}`)
+        : `${name}-1`
+    }
+    return newName
+  }
+}
+
 function escapeRegExpChars(string: string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }

src/routes/Home.tsx

@@ -148,7 +148,7 @@ const Home = () => {
                 }}
                 data-testid="home-new-file"
               >
-                New project
+                Create project
               </ActionButton>
             </div>
             <div className="flex gap-2 items-center">

src/wasm-lib/Cargo.lock

@@ -1382,12 +1382,6 @@ dependencies = [
  "tracing",
 ]
 
-[[package]]
-name = "iai"
-version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "71a816c97c42258aa5834d07590b718b4c9a598944cd39a52dc25b351185d678"
-
 [[package]]
 name = "iana-time-zone"
 version = "0.1.61"
@@ -1739,7 +1733,6 @@ dependencies = [
  "gltf-json",
  "handlebars",
  "http 1.2.0",
- "iai",
  "image",
  "indexmap 2.7.0",
  "insta",

src/wasm-lib/kcl/Cargo.toml

@@ -113,7 +113,6 @@ base64 = "0.22.1"
 criterion = { version = "0.5.1", features = ["async_tokio"] }
 expectorate = "1.1.0"
 handlebars = "6.3.0"
-iai = "0.1"
 image = { version = "0.25.5", default-features = false, features = ["png"] }
 insta = { version = "1.41.1", features = ["json", "filters", "redactions"] }
 itertools = "0.13.0"
@@ -129,10 +128,6 @@ workspace = true
 name = "compiler_benchmark_criterion"
 harness = false
 
-[[bench]]
-name = "compiler_benchmark_iai"
-harness = false
-
 [[bench]]
 name = "digest_benchmark"
 harness = false
@@ -142,15 +137,7 @@ name = "lsp_semantic_tokens_benchmark_criterion"
 harness = false
 required-features = ["lsp-test-util"]
 
-[[bench]]
-name = "lsp_semantic_tokens_benchmark_iai"
-harness = false
-required-features = ["lsp-test-util"]
-
 [[bench]]
 name = "executor_benchmark_criterion"
 harness = false
 
-[[bench]]
-name = "executor_benchmark_iai"
-harness = false

src/wasm-lib/kcl/benches/compiler_benchmark_iai.rs

@@ -1,35 +0,0 @@
-use iai::black_box;
-
-pub fn parse(program: &str) {
-    black_box(kcl_lib::Program::parse(program).unwrap());
-}
-
-fn parse_kitt() {
-    parse(KITT_PROGRAM)
-}
-fn parse_pipes() {
-    parse(PIPES_PROGRAM)
-}
-fn parse_cube() {
-    parse(CUBE_PROGRAM)
-}
-fn parse_math() {
-    parse(MATH_PROGRAM)
-}
-fn parse_lsystem() {
-    parse(LSYSTEM_PROGRAM)
-}
-
-iai::main! {
-    parse_kitt,
-    parse_pipes,
-    parse_cube,
-    parse_math,
-    parse_lsystem,
-}
-
-const KITT_PROGRAM: &str = include_str!("../../tests/executor/inputs/kittycad_svg.kcl");
-const PIPES_PROGRAM: &str = include_str!("../../tests/executor/inputs/pipes_on_pipes.kcl");
-const CUBE_PROGRAM: &str = include_str!("../../tests/executor/inputs/cube.kcl");
-const MATH_PROGRAM: &str = include_str!("../../tests/executor/inputs/math.kcl");
-const LSYSTEM_PROGRAM: &str = include_str!("../../tests/executor/inputs/lsystem.kcl");

src/wasm-lib/kcl/benches/executor_benchmark_iai.rs

@@ -1,27 +0,0 @@
-use iai::black_box;
-
-async fn execute_server_rack_heavy() {
-    let code = SERVER_RACK_HEAVY_PROGRAM;
-    black_box(
-        kcl_lib::test_server::execute_and_snapshot(code, kcl_lib::UnitLength::Mm, None)
-            .await
-            .unwrap(),
-    );
-}
-
-async fn execute_server_rack_lite() {
-    let code = SERVER_RACK_LITE_PROGRAM;
-    black_box(
-        kcl_lib::test_server::execute_and_snapshot(code, kcl_lib::UnitLength::Mm, None)
-            .await
-            .unwrap(),
-    );
-}
-
-iai::main! {
-    execute_server_rack_lite,
-    execute_server_rack_heavy,
-}
-
-const SERVER_RACK_HEAVY_PROGRAM: &str = include_str!("../../tests/executor/inputs/server-rack-heavy.kcl");
-const SERVER_RACK_LITE_PROGRAM: &str = include_str!("../../tests/executor/inputs/server-rack-lite.kcl");

src/wasm-lib/kcl/benches/lsp_semantic_tokens_benchmark_iai.rs

@@ -1,45 +0,0 @@
-use iai::black_box;
-use kcl_lib::kcl_lsp_server;
-use tower_lsp::LanguageServer;
-
-async fn kcl_lsp_semantic_tokens(code: &str) {
-    let server = kcl_lsp_server(false).await.unwrap();
-
-    // Send open file.
-    server
-        .did_open(tower_lsp::lsp_types::DidOpenTextDocumentParams {
-            text_document: tower_lsp::lsp_types::TextDocumentItem {
-                uri: "file:///test.kcl".try_into().unwrap(),
-                language_id: "kcl".to_string(),
-                version: 1,
-                text: code.to_string(),
-            },
-        })
-        .await;
-
-    // Send semantic tokens request.
-    black_box(
-        server
-            .semantic_tokens_full(tower_lsp::lsp_types::SemanticTokensParams {
-                text_document: tower_lsp::lsp_types::TextDocumentIdentifier {
-                    uri: "file:///test.kcl".try_into().unwrap(),
-                },
-                partial_result_params: Default::default(),
-                work_done_progress_params: Default::default(),
-            })
-            .await
-            .unwrap()
-            .unwrap(),
-    );
-}
-
-async fn semantic_tokens_global_tags() {
-    let code = GLOBAL_TAGS_FILE;
-    kcl_lsp_semantic_tokens(code).await;
-}
-
-iai::main! {
-    semantic_tokens_global_tags,
-}
-
-const GLOBAL_TAGS_FILE: &str = include_str!("../../tests/executor/inputs/global-tags.kcl");