Merge branch '10.0-release' into tgriesser/chore/e2e-data-clean

* 10.0-release:
  feat: use fuzzy search (#18966)
  fix: onUnmounted warning in topnav (#18988)
  fix: CYPRESS_INTERNAL_VITE_DEV for development
  feat: Create default config file (#18943)
  feat(app): support editor preference (#18932)

packages/app/cypress/e2e/integration/settings.spec.ts

@@ -1,4 +1,4 @@
-describe('Settings', { viewportWidth: 1200 }, () => {
+describe('Settings', { viewportWidth: 600 }, () => {
   beforeEach(() => {
     cy.openE2E('component-tests')
 
@@ -38,4 +38,18 @@ describe('Settings', { viewportWidth: 1200 }, () => {
     cy.findByText('Reconfigure Project').click()
     cy.wait('@ReconfigureProject')
   })
+
+  it('selects well known editor', () => {
+    cy.visitApp()
+    cy.get('[href="#/settings"]').click()
+    cy.contains('Device Settings').click()
+    cy.findByPlaceholderText('Custom path...').clear().type('/usr/local/bin/vim')
+
+    cy.intercept('POST', 'mutation-SetPreferredEditorBinary', (req) => {
+      expect(req.body.variables).to.eql({ 'value': '/usr/local/bin/vim' })
+    }).as('SetPreferred')
+
+    cy.get('[data-cy="use-custom-editor"]').click()
+    cy.wait('@SetPreferred')
+  })
 })

packages/app/package.json

@@ -42,6 +42,7 @@
     "cross-env": "6.0.3",
     "cypress-real-events": "1.4.0",
     "faker": "5.5.3",
+    "fuzzysort": "^1.1.4",
     "graphql": "^15.5.1",
     "graphql-tag": "^2.12.5",
     "javascript-time-ago": "2.3.8",
@@ -84,9 +85,11 @@
         "@vueuse/core",
         "bluebird",
         "cypress-file-upload",
+        "cypress-real-events",
         "dedent",
         "events",
         "fake-uuid",
+        "fuzzysort",
         "graphql",
         "graphql-relay",
         "graphql/jsutils/Path",

packages/app/src/settings/SettingsContainer.vue

@@ -9,7 +9,9 @@
       :icon="IconLaptop"
       max-height="800px"
     >
-      <DeviceSettings />
+      <ExternalEditorSettings :gql="props.gql" />
+      <ProxySettings :gql="props.gql" />
+      <TestingPreferences :gql="props.gql" />
     </SettingsCard>
     <SettingsCard
       :title="t('settingsPage.project.title')"
@@ -42,9 +44,11 @@
 import { useI18n } from '@cy/i18n'
 import { gql, useMutation } from '@urql/vue'
 import Button from '@cy/components/Button.vue'
+import ExternalEditorSettings from './device/ExternalEditorSettings.vue'
+import ProxySettings from './device/ProxySettings.vue'
 import SettingsCard from './SettingsCard.vue'
 import ProjectSettings from './project/ProjectSettings.vue'
-import DeviceSettings from './device/DeviceSettings.vue'
+import TestingPreferences from './device/TestingPreferences.vue'
 import { SettingsContainer_ReconfigureProjectDocument, SettingsContainerFragment } from '../generated/graphql'
 import IconLaptop from '~icons/cy/laptop_x24.svg'
 import IconFolder from '~icons/cy/folder-outline_x24.svg'
@@ -60,10 +64,13 @@ mutation SettingsContainer_ReconfigureProject {
 
 gql`
 fragment SettingsContainer on Query {
+  ... TestingPreferences
   currentProject {
     id
     ...ProjectSettings
   }
+  ...ExternalEditorSettings
+  ...ProxySettings
 }`
 
 const props = defineProps<{

packages/app/src/settings/device/ExternalEditorSettings.spec.tsx

@@ -1,34 +1,60 @@
 import ExternalEditorSettings from './ExternalEditorSettings.vue'
 import { defaultMessages } from '@cy/i18n'
+import { ExternalEditorSettingsFragmentDoc } from '../../generated/graphql-test'
 
 const editorText = defaultMessages.settingsPage.editor
 
 describe('<ExternalEditorSettings />', () => {
-  beforeEach(() => {
-    cy.mount(() => <ExternalEditorSettings class="p-12" />)
-  })
-
   it('renders the placeholder by default', () => {
+    cy.mountFragment(ExternalEditorSettingsFragmentDoc, {
+      render: (gqlVal) => {
+        return <ExternalEditorSettings gql={gqlVal} />
+      },
+    })
+
     cy.findByText(editorText.noEditorSelectedPlaceholder).should('be.visible')
   })
 
   it('renders the title and description', () => {
+    cy.mountFragment(ExternalEditorSettingsFragmentDoc, {
+      render: (gqlVal) => {
+        return <ExternalEditorSettings gql={gqlVal} />
+      },
+    })
+
     cy.findByText(editorText.description).should('be.visible')
     cy.findByText(editorText.title).should('be.visible')
   })
 
   it('can select an editor', () => {
+    cy.mountFragment(ExternalEditorSettingsFragmentDoc, {
+      render: (gqlVal) => {
+        return <ExternalEditorSettings gql={gqlVal} />
+      },
+    })
+
     const optionsSelector = '[role=option]'
     const inputSelector = '[aria-haspopup=true]'
 
     cy.get(inputSelector).click()
     .get(optionsSelector).should('be.visible')
     .get(optionsSelector).then(($options) => {
-      const text = $options.first().text()
-
       cy.wrap($options.first()).click()
-      .get(optionsSelector).should('not.exist')
-      .get(inputSelector).should('have.text', text)
     })
   })
+
+  it('can input a custom binary', () => {
+    cy.mountFragment(ExternalEditorSettingsFragmentDoc, {
+      render: (gqlVal) => {
+        return <ExternalEditorSettings gql={gqlVal} />
+      },
+    })
+
+    cy.findByPlaceholderText('Custom path...').type('/usr/bin')
+    cy.get('[data-cy="use-custom-editor"]').as('custom')
+    cy.get('@custom').click()
+
+    cy.get('@custom').should('be.focused')
+    cy.get('[data-cy="use-well-known-editor"]').should('not.be.focused')
+  })
 })