Initialize location in Cloud File Browser

CHANGELOG.md

@@ -28,6 +28,8 @@
   components][12275]
 - [Cloud File Browser allows renaming existing directories in "writing"
   components][12323]
+- [Cloud File Browser, when opened first time after opening project, shows and
+  highlights the currently set file][12184]
 
 [11889]: https://github.com/enso-org/enso/pull/11889
 [11836]: https://github.com/enso-org/enso/pull/11836
@@ -46,6 +48,7 @@
 [12217]: https://github.com/enso-org/enso/pull/12217
 [12275]: https://github.com/enso-org/enso/pull/12275
 [12323]: https://github.com/enso-org/enso/pull/12323
+[12184]: https://github.com/enso-org/enso/pull/12184
 
 #### Enso Standard Library
 

app/gui/src/project-view/components/GraphEditor/widgets/WidgetCloudBrowser.vue

@@ -15,13 +15,25 @@ const props = defineProps(widgetProps(widgetDefinition))
 const writeMode = computed(
   () => props.input[ArgumentInfoKey]?.info?.reprType.includes(WRITABLE_FILE_TYPE) ?? false,
 )
+
+const path = computed(() => {
+  if (props.input.value instanceof Ast.TextLiteral) {
+    return props.input.value.rawTextContent
+  } else if (typeof props.input.value === 'string') {
+    return Ast.TextLiteral.tryParse(props.input.value)?.rawTextContent ?? ''
+  } else {
+    return ''
+  }
+})
+
 const item: CustomDropdownItem = {
   label: 'Choose file from cloud...',
   onClick: ({ setActivity, close }) => {
     setActivity(
       computed(() =>
         h(FileBrowserWidget, {
           writeMode: writeMode.value,
+          choosenPath: path.value,
           onPathAccepted: (path: string) => {
             props.onUpdate({
               portUpdate: { value: Ast.TextLiteral.new(path), origin: props.input.portId },

app/gui/src/project-view/components/widgets/FileBrowserWidget.vue

@@ -9,6 +9,8 @@ import ContextMenuTrigger from '@/components/ContextMenuTrigger.vue'
 import LoadingSpinner from '@/components/shared/LoadingSpinner.vue'
 import SvgButton from '@/components/SvgButton.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
+import FileBrowserEntry from '@/components/widgets/FileBrowserWidget/FileBrowserEntry.vue'
+import { Directory, useFileBrowserStack } from '@/components/widgets/FileBrowserWidget/paths'
 import { useBackend } from '@/composables/backend'
 import { Action } from '@/providers/action'
 import { injectBackend } from '@/providers/backend'
@@ -26,11 +28,15 @@ import Backend, {
   assetIsDirectory,
   assetIsFile,
 } from 'enso-common/src/services/Backend'
-import { computed, onMounted, reactive, ref, toValue, watch } from 'vue'
-import { Err, Ok, Result } from 'ydoc-shared/util/data/result'
-import FileBrowserEntry from './FileBrowserWidget/FileBrowserEntry.vue'
-
-const { writeMode = false } = defineProps<{ writeMode?: boolean }>()
+import { computed, onMounted, reactive, ref, toRef, toValue, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    writeMode?: boolean
+    choosenPath?: string
+  }>(),
+  { writeMode: false, choosenPath: '' },
+)
 
 const emit = defineEmits<{
   pathAccepted: [path: string]
@@ -40,8 +46,8 @@ const { query, fetch, ensureQueryData, mutation } = useBackend('remote')
 const { remote: backend } = injectBackend()
 
 const errorToast = useToast.error()
-const fileName = ref<string>('')
 const newDirPlaceholder = Symbol()
+
 let nextKeyForNewDir = 0
 /**
  * Override for `:key` attribute in content entries.
@@ -52,28 +58,24 @@ let nextKeyForNewDir = 0
  */
 const keyOverride: Map<DirectoryId | symbol, number> = reactive(new Map())
 
-// === Current Directory ===
-
-interface Directory {
-  id: DirectoryId
-  title: string
-}
-
 const currentUser = query('usersMe', [])
 const currentOrganization = query('getOrganization', [])
-const directoryStack = ref<Directory[]>([])
-const isDirectoryStackInitializing = computed(() => directoryStack.value.length === 0)
-const currentDirectory = computed(() => directoryStack.value[directoryStack.value.length - 1])
-
-const currentPath = computed(() => {
-  if (!currentUser.data.value) return
-  let root = backend?.rootPath(currentUser.data.value) ?? 'enso://'
-  if (!root.endsWith('/')) root += '/'
-  return `${root}${directoryStack.value
-    .slice(1)
-    .map((dir) => `${dir.title}/`)
-    .join('')}`
-})
+
+const {
+  filenameInputContents,
+  directoryStack,
+  currentDirectory,
+  currentFilePath,
+  highlightedName,
+  initializeStack,
+  isDirectoryStackInitializing,
+} = useFileBrowserStack(
+  backend,
+  toRef(props, 'choosenPath'),
+  currentUser.data,
+  toRef(props, 'writeMode'),
+  (dir) => fetch('listDirectory', listDirectoryArgs(dir)),
+)
 
 // === Directory Contents ===
 
@@ -127,21 +129,13 @@ function enterDir(dir: DirectoryAsset) {
   directoryStack.value.push(dir)
 }
 
-class DirNotFoundError {
-  constructor(public dirName: string) {}
-
-  toString() {
-    return `Directory "${this.dirName}" not found`
-  }
-}
-
 function popTo(index: number) {
   directoryStack.value.splice(index + 1)
 }
 
 function chooseFile(file: FileAsset | DatalinkAsset) {
-  fileName.value = file.title
-  if (!writeMode) {
+  filenameInputContents.value = file.title
+  if (!props.writeMode) {
     acceptCurrentFile()
   }
 }
@@ -159,13 +153,10 @@ const isBusy = computed(() => isDirectoryStackInitializing.value || isPending.va
 const anyError = computed(() =>
   isError.value ? error
   : currentUser.isError.value ? currentUser.error
+  : currentOrganization.isError.value ? currentOrganization.error
   : undefined,
 )
 
-const currentFilePath = computed(
-  () => fileName.value && currentPath.value && `${currentPath.value}${fileName.value}`,
-)
-
 // === Creating and Renaming Directories ===
 
 const editedAsset = ref<{
@@ -254,34 +245,10 @@ const renameAction: Action = {
 
 // === Initialization ===
 
-async function enterDirByName(name: string, stack: Directory[]): Promise<Result> {
-  const currentDir = stack[stack.length - 1]
-  if (currentDir == null) return Err('Stack is empty')
-  const content = await fetch('listDirectory', listDirectoryArgs(currentDir))
-  const nextDir = content.find(
-    (asset): asset is DirectoryAsset => assetIsDirectory(asset) && asset.title === name,
-  )
-  if (!nextDir) return Err(new DirNotFoundError(name))
-  stack.push(nextDir)
-  return Ok()
-}
-
 onMounted(() => {
   Promise.all([currentUser.promise.value, currentOrganization.promise.value]).then(
-    async ([user, organization]) => {
-      if (!user) {
-        errorToast.show('Cannot load file list: not logged in.')
-        return
-      }
-      const rootDirectoryId =
-        backend?.rootDirectoryId(user, organization, null) ?? user.rootDirectoryId
-      const stack = [{ id: rootDirectoryId, title: 'Cloud' }]
-      if (rootDirectoryId != user.rootDirectoryId) {
-        let result = await enterDirByName('Users', stack)
-        result = result.ok ? await enterDirByName(user.name, stack) : result
-        if (!result.ok) errorToast.reportError(result.error, 'Cannot enter home directory')
-      }
-      directoryStack.value = stack
+    ([user, organizaton]) => {
+      initializeStack(user, organizaton)
     },
   )
 })
@@ -311,8 +278,8 @@ onMounted(() => {
       />
     </div>
 
-    <div v-if="isBusy" class="centerContent contents"><LoadingSpinner /></div>
-    <div v-else-if="anyError" class="centerContent contents">Error: {{ anyError }}</div>
+    <div v-if="anyError" class="centerContent contents">Error: {{ anyError }}</div>
+    <div v-else-if="isBusy" class="centerContent contents"><LoadingSpinner /></div>
     <div v-else-if="isEmpty" class="centerContent contents">Directory is empty</div>
     <div v-else :key="currentDirectory?.id ?? 'root'" class="listing contents">
       <ContextMenuTrigger :actions="[renameAction]" @hidden="focusedDirectory = undefined">
@@ -340,14 +307,15 @@ onMounted(() => {
             :key="entry.id"
             icon="text2"
             :title="entry.title"
+            :highlighted="entry.title === highlightedName"
             @click="chooseFile(entry)"
           />
         </TransitionGroup>
       </ContextMenuTrigger>
     </div>
     <div v-if="writeMode" class="fileNameBar">
       <input
-        v-model="fileName"
+        v-model="filenameInputContents"
         class="fileNameInput"
         @pointerdown.stop
         @click.stop
@@ -361,7 +329,7 @@ onMounted(() => {
       <SvgButton
         class="fileNameAcceptButton"
         label="Ok"
-        :disabled="!fileName"
+        :disabled="!filenameInputContents"
         @click.stop="acceptCurrentFile"
       />
     </div>

app/gui/src/project-view/components/widgets/FileBrowserWidget/FileBrowserEntry.vue

@@ -7,6 +7,7 @@ import { ref, watch } from 'vue'
 const props = defineProps<{
   title: string
   icon: Icon
+  highlighted?: boolean
   editingState?: 'editing' | 'pending' | 'just created' | undefined
 }>()
 
@@ -30,7 +31,7 @@ watch(input, (newInput) => {
 </script>
 
 <template>
-  <div class="FileBrowserEntry" @click="emit('click')">
+  <div :class="{ FileBrowserEntry: true, highlighted }" @click="emit('click')">
     <LoadingSpinner v-if="editingState === 'pending'" :size="16" />
     <SvgIcon v-else :name="icon" />
     <input
@@ -69,6 +70,10 @@ watch(input, (newInput) => {
     background-color: var(--color-menu-entry-hover-bg);
   }
 
+  &.highlighted {
+    background-color: var(--color-menu-entry-selected-bg);
+  }
+
   & .LoadingSpinner {
     border-radius: 100%;
   }