Provide backend access to IDE

app/gui2/src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import HelpScreen from '@/components/HelpScreen.vue'
 import { provideAppClassSet } from '@/providers/appClass'
+import { provideBackend } from '@/providers/backend'
 import { provideEventLogger } from '@/providers/eventLogging'
 import { provideGuiConfig } from '@/providers/guiConfig'
 import { registerAutoBlurHandler } from '@/util/autoBlur'
@@ -13,7 +14,8 @@ import {
 } from '@/util/config'
 import ProjectView from '@/views/ProjectView.vue'
 import { useEventListener } from '@vueuse/core'
-import { computed, toRef, watch } from 'vue'
+import Backend from 'enso-common/src/services/Backend'
+import { computed, markRaw, toRaw, toRef, watch } from 'vue'
 import TooltipDisplayer from './components/TooltipDisplayer.vue'
 import { provideTooltipRegistry } from './providers/tooltipState'
 import { initializePrefixes } from './util/ast/node'
@@ -26,8 +28,11 @@ const props = defineProps<{
   hidden: boolean
   ignoreParamsRegex?: RegExp
   renameProject: (newName: string) => void
+  backend: Backend
 }>()
 
+provideBackend(() => markRaw(toRaw(props.backend)))
+
 const classSet = provideAppClassSet()
 const appTooltips = provideTooltipRegistry()
 

app/gui2/src/providers/backend.ts

@@ -0,0 +1,11 @@
+import { createContextStore } from '@/providers'
+import type { ToValue } from '@/util/reactivity'
+import type Backend from 'enso-common/src/services/Backend'
+import { computed, proxyRefs, toValue } from 'vue'
+
+export { injectFn as injectBackend, provideFn as provideBackend }
+const { provideFn, injectFn } = createContextStore('backend', (backend: ToValue<Backend>) =>
+  proxyRefs({
+    backend: computed(() => toValue(backend)),
+  }),
+)

app/ide-desktop/lib/dashboard/src/layouts/Editor.tsx

@@ -96,8 +96,8 @@ function EditorInternal(props: EditorInternalProps) {
     [remoteBackend]
   )
 
-  const renameProject = React.useCallback(
-    (newName: string) => {
+  const backend = React.useMemo(
+    () => {
       let backend: Backend | null
       switch (projectStartupInfo.backendType) {
         case backendModule.BackendType.local:
@@ -107,6 +107,12 @@ function EditorInternal(props: EditorInternalProps) {
           backend = remoteBackend
           break
       }
+      return backend
+    }, [localBackend, remoteBackend, projectStartupInfo.backendType]
+  )
+
+  const renameProject = React.useCallback(
+    (newName: string) => {
       const { id: projectId, parentId, title } = projectStartupInfo.projectAsset
       backend
         ?.updateProject(
@@ -121,7 +127,7 @@ function EditorInternal(props: EditorInternalProps) {
           e => toastAndLog('renameProjectError', e)
         )
     },
-    [remoteBackend, localBackend, projectStartupInfo, toastAndLog]
+    [backend, projectStartupInfo.projectAsset, toastAndLog]
   )
 
   React.useEffect(() => {
@@ -162,6 +168,7 @@ function EditorInternal(props: EditorInternalProps) {
         ignoreParamsRegex: IGNORE_PARAMS_REGEX,
         logEvent,
         renameProject,
+        backend,
       }
     }
   }, [
@@ -175,6 +182,7 @@ function EditorInternal(props: EditorInternalProps) {
     hidden,
     logEvent,
     renameProject,
+    backend,
   ])
 
   if (AppRunner == null) {

app/ide-desktop/lib/dashboard/src/services/Backend.ts

@@ -1,6 +1,7 @@
 import type * as React from 'react'
 import * as backend from 'enso-common/src/services/Backend'
 import Backend from 'enso-common/src/services/Backend'
+
 export * from 'enso-common/src/services/Backend'
 export default Backend
 

app/ide-desktop/lib/types/types.d.ts

@@ -1,6 +1,8 @@
 /** @file Interfaces common to multiple modules. */
 import type * as React from 'react'
 
+import type Backend from 'enso-common/src/services/Backend'
+
 // ======================================
 // === Globally accessible interfaces ===
 // ======================================
@@ -22,6 +24,7 @@ interface EditorProps {
         metadata?: object | null
     ) => void
     readonly renameProject: (newName: string) => void
+    readonly backend: Backend | null
 }
 
 /** The value passed from the entrypoint to the dashboard, which enables the dashboard to