Fix: always, show location in top bar, make file picker work in vario…

…us locations, file picker width too narrow (#11900)

changelog/unreleased/bugfix-app-top-bar-does-not-show-location-when-shared-file-is-opened

@@ -0,0 +1,6 @@
+Bugfix: App top bar does not show location when shared file is opened
+
+We've fixed an issue where the app top bar did not show the location when a shared file was opened.
+
+https://github.com/owncloud/web/pull/11900
+https://github.com/owncloud/web/issues/11896

changelog/unreleased/bugfix-open-from-app-and-save-as-feature-broken-when-opened-via-shared-file

@@ -0,0 +1,6 @@
+Bugfix: Open from app and Save As feature broken when opened via shared file
+
+We've fixed an issue where the Open from app and Save As feature was broken when opened via a shared file.
+
+https://github.com/owncloud/web/pull/11900
+https://github.com/owncloud/web/issues/11895

packages/web-pkg/src/components/AppTemplates/AppWrapper.vue

@@ -281,7 +281,12 @@ export default defineComponent({
           yield addMissingDriveAliasAndItem()
         }
         space.value = unref(unref(currentFileContext).space)
-        resource.value = yield getFileInfo(currentFileContext, { signal })
+        resource.value = yield getFileInfo(unref(currentFileContext), { signal })
+
+        //FIXME: As soon the backend exposes oc-remote-id via webdav, remove the assignment below
+        if (isShareSpaceResource(unref(space))) {
+          unref(resource).remoteItemId = unref(space).id
+        }
         resourcesStore.initResourceList({ currentFolder: null, resources: [unref(resource)] })
         selectedResources.value = [unref(resource)]
       } catch (e) {

packages/web-pkg/src/components/AppTopBar.vue

@@ -8,11 +8,11 @@
             id="app-top-bar-resource"
             :is-thumbnail-displayed="false"
             :is-extension-displayed="areFileExtensionsShown"
-            :path-prefix="pathPrefix"
+            :path-prefix="getPathPrefix(resource)"
             :resource="resource"
-            :parent-folder-name="parentFolderName"
+            :parent-folder-name="getParentFolderName(resource)"
             :parent-folder-link-icon-additional-attributes="
-              parentFolderLinkIconAdditionalAttributes
+              getParentFolderLinkIconAdditionalAttributes(resource)
             "
             :is-path-displayed="isPathDisplayed"
           />
@@ -99,7 +99,7 @@ import {
   useResourcesStore
 } from '../composables'
 import ResourceListItem from './FilesList/ResourceListItem.vue'
-import { Resource, isPublicSpaceResource, isShareSpaceResource } from '@ownclouders/web-client'
+import { isPublicSpaceResource, Resource } from '@ownclouders/web-client'
 import { Duration } from 'luxon'
 
 export default defineComponent({
@@ -140,9 +140,9 @@ export default defineComponent({
   emits: ['close'],
   setup(props) {
     const { $gettext, current: currentLanguage } = useGettext()
-    const { getMatchingSpace } = useGetMatchingSpace()
     const resourcesStore = useResourcesStore()
     const configStore = useConfigStore()
+    const { getMatchingSpace } = useGetMatchingSpace()
 
     const areFileExtensionsShown = computed(() => resourcesStore.areFileExtensionsShown)
     const contextMenuLabel = computed(() => $gettext('Show context menu'))
@@ -158,38 +158,20 @@ export default defineComponent({
       return $gettext(`Autosave (every %{ duration })`, { duration: duration.toHuman() })
     })
 
-    const { getParentFolderName, getParentFolderLinkIconAdditionalAttributes, getPathPrefix } =
-      useFolderLink()
-
     const space = computed(() => getMatchingSpace(props.resource))
 
-    //FIXME: We currently have problems to display the parent folder name of a shared file, so we disabled it for now
     const isPathDisplayed = computed(() => {
-      return !isShareSpaceResource(unref(space)) && !isPublicSpaceResource(unref(space))
-    })
-
-    const pathPrefix = computed(() => {
-      return props.resource ? getPathPrefix(props.resource) : null
-    })
-
-    const parentFolderName = computed(() => {
-      return props.resource ? getParentFolderName(props.resource) : null
-    })
-
-    const parentFolderLinkIconAdditionalAttributes = computed(() => {
-      return props.resource ? getParentFolderLinkIconAdditionalAttributes(props.resource) : null
+      return !isPublicSpaceResource(unref(space))
     })
 
     return {
-      pathPrefix,
-      isPathDisplayed,
       contextMenuLabel,
       closeButtonLabel,
-      parentFolderName,
-      parentFolderLinkIconAdditionalAttributes,
       areFileExtensionsShown,
       hasAutosave,
-      autoSaveTooltipText
+      autoSaveTooltipText,
+      isPathDisplayed,
+      ...useFolderLink()
     }
   }
 })

packages/web-pkg/src/components/Modals/FilePickerModal.vue

@@ -123,7 +123,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.open-with-app-modal {
+.oc-modal.open-with-app-modal {
   max-width: 80vw;
   border: none;
   overflow: hidden;

packages/web-pkg/src/components/Modals/SaveAsModal.vue

@@ -189,7 +189,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.save-as-modal {
+.oc-modal.save-as-modal {
   max-width: 80vw;
   border: none;
   overflow: hidden;

packages/web-pkg/src/composables/folderLink/useFolderLink.ts

@@ -67,7 +67,11 @@ export const useFolderLink = (options: ResourceRouteResolverOptions = {}) => {
       space,
       path: dirname(resource.path)
     })
-    if (isShareRoot(resource) || !parentFolderAccessible) {
+
+    //FIXME: As soon the backend exposes oc-share-root via webdav, only use isShareRoot fn
+    const shareRoot =
+      isShareRoot(resource) || (resource.id === space.id && isShareSpaceResource(space))
+    if (shareRoot || !parentFolderAccessible) {
       return $gettext('Shared with me')
     }
     const parentFolder = extractParentFolderName(resource)

packages/web-pkg/tests/unit/composables/folderLink/useFolderLink.spec.ts

@@ -75,7 +75,8 @@ describe('useFolderLink', () => {
       const resource = {
         path: '/My share/test.txt',
         remoteItemPath: '/My share',
-        remoteItemId: '1'
+        remoteItemId: '1',
+        storageId: '1'
       } as Resource
 
       const wrapper = createWrapper()