Use enso paths in cloud browser (#11001)

Fixes #10947

(cherry picked from commit 32f10a55f4)

CHANGELOG.md

@@ -14,6 +14,7 @@
   updated actual code][10857]
 - [Added fullscreen modes to documentation editor and code editor][10876]
 - [Fixed issue with node name assignment when uploading multiple files.][10979]
+- [Cloud file browser inserts `enso:` paths][11001]
 - [Fixed issue where drag'n'dropped files were not uploaded in cloud
   projects.][11014]
 
@@ -23,6 +24,7 @@
 [10857]: https://github.com/enso-org/enso/pull/10857
 [10876]: https://github.com/enso-org/enso/pull/10876
 [10979]: https://github.com/enso-org/enso/pull/10979
+[11001]: https://github.com/enso-org/enso/pull/11001
 [11014]: https://github.com/enso-org/enso/pull/11014
 
 #### Enso Standard Library

app/gui2/src/components/widgets/FileBrowserWidget.vue

@@ -17,7 +17,7 @@ const emit = defineEmits<{
   pathSelected: [path: string]
 }>()
 
-const { prefetch, ensureQueryData } = useBackendQueryPrefetching()
+const { ensureQueryData } = useBackendQueryPrefetching()
 
 // === Current Directory ===
 
@@ -33,6 +33,12 @@ const directoryStack = ref<Directory[]>([
   },
 ])
 const currentDirectory = computed(() => directoryStack.value[directoryStack.value.length - 1]!)
+const currentUser = useBackendQuery('usersMe', [])
+const currentPath = computed(
+  () =>
+    currentUser.data.value &&
+    `enso://Users/${currentUser.data.value.name}${Array.from(directoryStack.value.slice(1), (frame) => '/' + frame.title).join()}`,
+)
 
 // === Directory Contents ===
 
@@ -75,15 +81,6 @@ interface File {
 
 const selectedFile = ref<File>()
 
-function getFileDetailsArgs(parameters: ToValue<File | undefined>) {
-  return computed<Parameters<Backend['getFileDetails']> | undefined>(() => {
-    const paramsValue = toValue(parameters)
-    return paramsValue ? [paramsValue.id, paramsValue.title] : undefined
-  })
-}
-
-const selectedFileDetails = useBackendQuery('getFileDetails', getFileDetailsArgs(selectedFile))
-
 // === Prefetching ===
 
 watch(directories, (directories) => {
@@ -94,11 +91,6 @@ watch(directories, (directories) => {
     ensureQueryData('listDirectory', listDirectoryArgs(directory))
 })
 
-watch(files, (files) => {
-  // Prefetch file info to avoid lag when the user makes a selection.
-  for (const file of files ?? []) prefetch('getFileDetails', getFileDetailsArgs(file))
-})
-
 // === Interactivity ===
 
 function enterDir(dir: DirectoryAsset) {
@@ -114,17 +106,22 @@ function chooseFile(file: FileAsset) {
 }
 
 const isBusy = computed(
-  () => isPending.value || (selectedFile.value && selectedFileDetails.isPending.value),
+  () => isPending.value || (selectedFile.value && currentUser.isPending.value),
 )
 
 const anyError = computed(() =>
   isError.value ? error
-  : selectedFileDetails.isError.value ? selectedFileDetails.error
+  : currentUser.isError.value ? currentUser.error
   : undefined,
 )
 
-watch(selectedFileDetails.data, (details) => {
-  if (details) emit('pathSelected', details.file.path)
+const selectedFilePath = computed(
+  () =>
+    selectedFile.value && currentPath.value && `${currentPath.value}/${selectedFile.value.title}`,
+)
+
+watch(selectedFilePath, (path) => {
+  if (path) emit('pathSelected', path)
 })
 </script>