feat(app): support editor preference

packages/app/src/settings/SettingsContainer.vue

@@ -9,6 +9,7 @@
       :icon="IconLaptop"
       max-height="800px"
     >
+      <ExternalEditorSettings :gql="props.gql" />
       <DeviceSettings />
     </SettingsCard>
     <SettingsCard
@@ -42,6 +43,7 @@
 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 SettingsCard from './SettingsCard.vue'
 import ProjectSettings from './project/ProjectSettings.vue'
 import DeviceSettings from './device/DeviceSettings.vue'
@@ -64,6 +66,7 @@ fragment SettingsContainer on Query {
     id
     ...ProjectSettings
   }
+  ...ExternalEditorSettings
 }`
 
 const props = defineProps<{

packages/app/src/settings/device/DeviceSettings.vue

@@ -1,11 +1,9 @@
 <template>
-  <ExternalEditorSettings />
   <TestingPreferences />
   <ProxySettings />
 </template>
 
 <script lang="ts" setup>
-import ExternalEditorSettings from './ExternalEditorSettings.vue'
 import ProxySettings from './ProxySettings.vue'
 import TestingPreferences from './TestingPreferences.vue'
 </script>

packages/app/src/settings/device/ExternalEditorSettings.vue

@@ -7,25 +7,27 @@
       {{ t('settingsPage.editor.description') }}
     </template>
     <Select
-      v-model="selectedEditor"
+      :model-value="selectedEditor"
       :options="externalEditors"
       item-value="name"
+      item-key="id"
       :placeholder="t('settingsPage.editor.noEditorSelectedPlaceholder')"
       class="w-300px"
+      @update:model-value="updateEditor"
     >
       <template #input-prefix="{ value }">
         <Icon
           v-if="value"
-          :icon="value.icon"
+          :icon="icons[value.id]"
           class="text-md"
         />
         <Icon
           v-else
-          :icon="IconTerminal"
+          n="IconTerminal"
           class="text-gray-600 text-md"
         />
       </template>
-      <template #item-prefix="{value}">
+      <template #item-prefix="{ value }">
         <Icon
           :icon="value.icon"
           class="text-md"
@@ -36,8 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-
-import { ref } from 'vue'
+import { computed, FunctionalComponent, ref, SVGAttributes, watchEffect } from 'vue'
 import Icon from '@cy/components/Icon.vue'
 import SettingsSection from '../SettingsSection.vue'
 import { useI18n } from '@cy/i18n'
@@ -49,41 +50,73 @@ import Vim from '~icons/logos/vim'
 import Sublime from '~icons/logos/sublimetext-icon'
 import Emacs from '~icons/logos/emacs'
 import IconTerminal from '~icons/mdi/terminal'
+import { gql } from '@urql/core'
+import type { ExternalEditorSettingsFragment } from '../../generated/graphql'
+import type { EditorId } from '@packages/types/src/editors'
+import { useMutation } from '@urql/vue'
+import { SetPreferredEditorDocument } from '@packages/data-context/src/gen/all-operations.gen'
+
+interface EditorItem {
+  name: string
+  key: string
+  binary: string | null
+  icon: FunctionalComponent<SVGAttributes, {}>
+}
+
+// @ts-ignore (lachlan): add all icons for all editors
+const icons: Record<EditorId, EditorItem['icon']> = {
+  'code': VSCode,
+  'webstorm': Webstorm,
+  'atom': Atom,
+  'sublimetext': Sublime,
+  'sublimetext2': Sublime,
+  'sublimetextdev': Sublime,
+  'vim': Vim,
+  'emacs': Emacs,
+}
+
+const externalEditors = computed(() => {
+  return props.gql.editors.map((x) => ({ ...x, icon: icons[x.id] }))
+})
+
+gql`
+mutation SetPreferredEditor ($binary: String!) {
+  setPreferredEditor (binary: $binary)
+}`
+
+gql`
+fragment ExternalEditorSettings on Query {
+  editors {
+    id
+    name
+    binary
+    isPreferred
+  }
+}`
 
-// TODO, grab these from gql or the user's machine.
-const externalEditors = [
-  {
-    name: 'Visual Studio Code',
-    key: 'vscode',
-    icon: VSCode,
-  },
-  {
-    name: 'Webstorm',
-    key: 'webstorm',
-    icon: Webstorm,
-  },
-  {
-    name: 'Atom',
-    key: 'atom',
-    icon: Atom,
-  },
-  {
-    name: 'Sublime Text',
-    key: 'sublime',
-    icon: Sublime,
-  },
-  {
-    name: 'Vim',
-    key: 'vim',
-    icon: Vim,
-  },
-  {
-    name: 'Emacs',
-    key: 'emacs',
-    icon: Emacs,
-  },
-]
+const setPreferredEditor = useMutation(SetPreferredEditorDocument)
+
+const props = defineProps<{
+  gql: ExternalEditorSettingsFragment
+}>()
+
+type ExternalEditor = ExternalEditorSettingsFragment['editors'][number]
 
 const { t } = useI18n()
-const selectedEditor = ref<Record<string, any>>()
+const selectedEditor = ref<ExternalEditor | undefined>(undefined)
+
+const updateEditor = async (editor: ExternalEditor) => {
+  if (!editor?.binary) {
+    return
+  }
+
+  await setPreferredEditor.executeMutation({ binary: editor.binary })
+  selectedEditor.value = editor
+}
+
+watchEffect(() => {
+  const preferred = props.gql.editors.find((x) => x.isPreferred)
+
+  selectedEditor.value = preferred
+})
 </script>

packages/data-context/src/DataActions.ts

@@ -2,6 +2,7 @@ import type { DataContext } from '.'
 import { AppActions, ElectronActions, FileActions, ProjectActions, WizardActions } from './actions'
 import { AuthActions } from './actions/AuthActions'
 import { DevActions } from './actions/DevActions'
+import { EditorActions } from './actions/EditorActions'
 import { cached } from './util'
 
 export class DataActions {
@@ -41,4 +42,9 @@ export class DataActions {
   get electron () {
     return new ElectronActions(this.ctx)
   }
+
+  @cached
+  get editor () {
+    return new EditorActions(this.ctx)
+  }
 }

packages/data-context/src/DataContext.ts

@@ -19,6 +19,7 @@ import {
   CloudDataSource,
   ConfigDataSource,
   EnvDataSource,
+  EditorDataSource,
   GraphQLDataSource,
   HtmlDataSource,
   UtilDataSource,
@@ -30,6 +31,7 @@ import type { AddressInfo } from 'net'
 import EventEmitter from 'events'
 import type { App as ElectronApp } from 'electron'
 import { VersionsDataSource } from './sources/VersionsDataSource'
+import type { EditorApiShape } from './actions/EditorActions'
 
 const IS_DEV_ENV = process.env.CYPRESS_INTERNAL_ENV !== 'production'
 
@@ -54,6 +56,7 @@ export interface DataContextConfig {
   authApi: AuthApiShape
   projectApi: ProjectApiShape
   electronApi: ElectronApiShape
+  editorApi: EditorApiShape
   /**
    * Internal options used for testing purposes
    */
@@ -80,6 +83,10 @@ export class DataContext {
     return this._config.electronApi
   }
 
+  get editorApi () {
+    return this._config.editorApi
+  }
+
   get isGlobalMode () {
     return !this.currentProject
   }
@@ -162,6 +169,11 @@ export class DataContext {
     return new FileDataSource(this)
   }
 
+  @cached
+  get editor () {
+    return new EditorDataSource(this)
+  }
+
   @cached
   get git () {
     return new GitDataSource(this)
@@ -287,6 +299,7 @@ export class DataContext {
       authApi: this._config.authApi,
       projectApi: this._config.projectApi,
       electronApi: this._config.electronApi,
+      editorApi: this._config.editorApi,
       busApi: this._rootBus,
     }
   }

packages/data-context/src/actions/EditorActions.ts

@@ -0,0 +1,19 @@
+import type { DataContext } from '..'
+import type { Editor, EditorsResult } from '@packages/types'
+
+export interface EditorApiShape {
+  getAllEditors (): Promise<EditorsResult>
+  setPreferredEditor (editor: Editor): Promise<void>
+}
+
+export class EditorActions {
+  constructor (private ctx: DataContext) { }
+
+  getAllEditors () {
+    return this.ctx.editorApi.getAllEditors()
+  }
+
+  async setPreferredEditor (editor: Editor) {
+    return this.ctx.editorApi.setPreferredEditor(editor)
+  }
+}

packages/data-context/src/actions/index.ts

@@ -5,6 +5,7 @@ export * from './AppActions'
 export * from './AuthActions'
 export * from './DataEmitterActions'
 export * from './DevActions'
+export * from './EditorActions'
 export * from './ElectronActions'
 export * from './FileActions'
 export * from './ProjectActions'

packages/data-context/src/data/coreDataShape.ts

@@ -1,5 +1,5 @@
 import { BUNDLERS, FoundBrowser, FoundSpec, FullConfig, Preferences } from '@packages/types'
-import type { NexusGenEnums, TestingTypeEnum } from '@packages/graphql/src/gen/nxs.gen'
+import type { NexusGenEnums, NexusGenObjects, TestingTypeEnum } from '@packages/graphql/src/gen/nxs.gen'
 import type { BrowserWindow } from 'electron'
 import type { ChildProcess } from 'child_process'
 
@@ -19,6 +19,10 @@ export interface DevStateShape {
   refreshState: null | string
 }
 
+export interface EditorDataShape {
+  all: NexusGenObjects['Editor'][]
+}
+
 export interface ConfigChildProcessShape {
   process: ChildProcess
   executedPlugins: null | 'e2e' | 'ct'
@@ -70,6 +74,7 @@ export interface BaseErrorDataShape {
 export interface CoreDataShape {
   baseError: BaseErrorDataShape | null
   dev: DevStateShape
+  editor: EditorDataShape
   app: AppDataShape
   currentProject: ActiveProjectShape | null
   wizard: WizardDataShape
@@ -93,6 +98,9 @@ export function makeCoreData (): CoreDataShape {
       browsers: null,
       projects: [],
     },
+    editor: {
+      all: [],
+    },
     isAuthBrowserOpened: false,
     currentProject: null,
     wizard: {

packages/data-context/src/sources/EditorDataSource.ts

@@ -0,0 +1,9 @@
+import type { DataContext } from '..'
+
+export class EditorDataSource {
+  constructor (private ctx: DataContext) {}
+
+  async getEditors (): Promise<any> {
+    return this.ctx._apis.editorApi.getAllEditors()
+  }
+}

packages/data-context/src/sources/index.ts

@@ -4,6 +4,7 @@
 export * from './BrowserDataSource'
 export * from './CloudDataSource'
 export * from './ConfigDataSource'
+export * from './EditorDataSource'
 export * from './EnvDataSource'
 export * from './FileDataSource'
 export * from './GitDataSource'

packages/desktop-gui/cypress/integration/settings_spec.js

@@ -782,11 +782,11 @@ describe('Settings', () => {
 
   describe('file preference panel', () => {
     const availableEditors = [
-      { id: 'atom', name: 'Atom', isOther: false, openerId: 'atom' },
-      { id: 'vim', name: 'Vim', isOther: false, openerId: 'vim' },
-      { id: 'sublime', name: 'Sublime Text', isOther: false, openerId: 'sublime' },
-      { id: 'vscode', name: 'Visual Studio Code', isOther: false, openerId: 'vscode' },
-      { id: 'other', name: 'Other', isOther: true, openerId: '' },
+      { id: 'atom', name: 'Atom', isOther: false, binary: 'atom' },
+      { id: 'vim', name: 'Vim', isOther: false, binary: 'vim' },
+      { id: 'sublime', name: 'Sublime Text', isOther: false, binary: 'sublime' },
+      { id: 'vscode', name: 'Visual Studio Code', isOther: false, binary: 'vscode' },
+      { id: 'other', name: 'Other', isOther: true, binary: '' },
     ]
 
     beforeEach(function () {

packages/desktop-gui/cypress/integration/specs_list_spec.js

@@ -904,12 +904,12 @@ describe('Specs List', function () {
     describe('opens files', function () {
       beforeEach(function () {
         this.availableEditors = [
-          { id: 'computer', name: 'On Computer', isOther: false, openerId: 'computer' },
-          { id: 'atom', name: 'Atom', isOther: false, openerId: 'atom' },
-          { id: 'vim', name: 'Vim', isOther: false, openerId: 'vim' },
-          { id: 'sublime', name: 'Sublime Text', isOther: false, openerId: 'sublime' },
-          { id: 'vscode', name: 'Visual Studio Code', isOther: false, openerId: 'vscode' },
-          { id: 'other', name: 'Other', isOther: true, openerId: '' },
+          { id: 'computer', name: 'On Computer', isOther: false, binary: 'computer' },
+          { id: 'atom', name: 'Atom', isOther: false, binary: 'atom' },
+          { id: 'vim', name: 'Vim', isOther: false, binary: 'vim' },
+          { id: 'sublime', name: 'Sublime Text', isOther: false, binary: 'sublime' },
+          { id: 'vscode', name: 'Visual Studio Code', isOther: false, binary: 'vscode' },
+          { id: 'other', name: 'Other', isOther: true, binary: '' },
         ]
 
         cy.get('@spec').realHover()

packages/desktop-gui/src/settings/file-preference.jsx

@@ -39,7 +39,7 @@ const FilePreference = observer(() => {
     setOtherPath: action((otherPath) => {
       const otherOption = _.find(state.editors, { isOther: true })
 
-      otherOption.openerId = otherPath
+      otherOption.binary = otherPath
       save(otherOption)
     }),
   }))