Fix Commands button to show correct shortcut on Windows and Linux (#3625)

* Fix Commands button to show correct shortcut

* Fix onboarding to use the same shortcut reference

* Rename test file to be more general

* Add test for commands button text

* Remove outdated reference to Ctrl+/

* Change shortcut separator to be + and no spaces

* Add JSDocs and improve comments

* Add unit tests

* Change control modifier to regular ASCII caret

* Add browser test and fix platform detection

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* Add useful debug info to the error message

* Fix to display metaKey as Super on Linux

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)"

This reverts commit f8da90d5d2.

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* Approve snapshots

---------

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

e2e/playwright/app-header-tests.spec.ts

@@ -6,7 +6,39 @@ test.afterEach(async ({ page }, testInfo) => {
   await tearDown(page, testInfo)
 })
 
-test.describe('Electron user sidebar menu tests', () => {
+test.describe('Electron app header tests', () => {
+  test(
+    'Open Command Palette button has correct shortcut',
+    { tag: '@electron' },
+    async ({ browserName }, testInfo) => {
+      const { electronApp, page } = await setupElectron({
+        testInfo,
+        folderSetupFn: async () => {},
+      })
+
+      await page.setViewportSize({ width: 1200, height: 500 })
+
+      // No space before the shortcut since it checks textContent.
+      let text
+      switch (process.platform) {
+        case 'darwin':
+          text = 'Commands⌘K'
+          break
+        case 'win32':
+          text = 'CommandsCtrl+K'
+          break
+        default: // 'linux' etc.
+          text = 'CommandsCtrl+K'
+          break
+      }
+      const commandsButton = page.getByRole('button', { name: 'Commands' })
+      await expect(commandsButton).toBeVisible()
+      await expect(commandsButton).toHaveText(text)
+
+      await electronApp.close()
+    }
+  )
+
   test(
     'User settings has correct shortcut',
     { tag: '@electron' },

e2e/playwright/testing-settings.spec.ts

@@ -122,6 +122,36 @@ test.describe('Testing settings', () => {
     ).not.toBeChecked()
   })
 
+  test('Keybindings display the correct hotkey for Command Palette', async ({
+    page,
+  }) => {
+    const u = await getUtils(page)
+    await page.setViewportSize({ width: 1200, height: 500 })
+    await u.waitForAuthSkipAppStart()
+
+    await test.step('Open keybindings settings', async () => {
+      // Open the settings modal with the browser keyboard shortcut
+      await page.keyboard.press('ControlOrMeta+Shift+,')
+
+      // Go to Keybindings tab.
+      const keybindingsTab = page.getByRole('radio', { name: 'Keybindings' })
+      await keybindingsTab.click()
+    })
+
+    // Go to the hotkey for Command Palette.
+    const commandPalette = page.getByText('Toggle Command Palette')
+    await commandPalette.scrollIntoViewIfNeeded()
+
+    // The heading is above it and should be in view now.
+    const commandPaletteHeading = page.getByRole('heading', {
+      name: 'Command Palette',
+    })
+    // The hotkey is in a kbd element next to the heading.
+    const hotkey = commandPaletteHeading.locator('+ div kbd')
+    const text = process.platform === 'darwin' ? 'Command+K' : 'Control+K'
+    await expect(hotkey).toHaveText(text)
+  })
+
   test('Project and user settings can be reset', async ({ page }) => {
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })