Merge pull request #8446 from pascalwengerter/feature/8445

[full-ci] Show single (publicly) shared file in DetailsView

changelog/unreleased/enhancement-single-share-view

@@ -0,0 +1,7 @@
+Enhancement: Open individually shared file in dedicated view
+
+We have added functionality to open a single, publicly shared file in a different view (instead of showing it in a table).
+
+https://github.com/owncloud/web/issues/8445
+https://github.com/owncloud/web/pull/8440
+https://github.com/owncloud/web/pull/8446

packages/web-app-files/src/components/FilesList/ResourceDetails.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="resource-details oc-flex oc-flex-column oc-flex-middle">
+    <div class="oc-width-1-3@l oc-width-1-2@m oc-width-3-4">
+      <file-info />
+      <file-details class="oc-mb" />
+      <file-actions />
+    </div>
+  </div>
+</template>
+
+  <script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { Resource, SpaceResource } from 'web-client/src/helpers'
+
+import FileActions from '../SideBar/Actions/FileActions.vue'
+import FileDetails from '../SideBar/Details/FileDetails.vue'
+import FileInfo from '../SideBar/FileInfo.vue'
+
+export default defineComponent({
+  components: {
+    FileActions,
+    FileDetails,
+    FileInfo
+  },
+  provide() {
+    return {
+      resource: computed(() => this.singleResource),
+      space: computed(() => this.space)
+    }
+  },
+  props: {
+    singleResource: {
+      type: Object as PropType<Resource>,
+      required: false,
+      default: null
+    },
+    space: {
+      type: Object as PropType<SpaceResource>,
+      required: false,
+      default: null
+    }
+  }
+})
+</script>

packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue

@@ -33,9 +33,13 @@
 </template>
 
 <script lang="ts">
+import { computed, defineComponent, inject, ref, unref, VNodeRef } from 'vue'
+import { SpaceResource } from 'web-client'
 import ActionMenuItem from 'web-pkg/src/components/ContextActions/ActionMenuItem.vue'
-import { useSpaceActionsUploadImage } from '../../../composables/actions/spaces/useSpaceActionsUploadImage'
-
+import QuotaModal from 'web-pkg/src/components/Spaces/QuotaModal.vue'
+import ReadmeContentModal from 'web-pkg/src/components/Spaces/ReadmeContentModal.vue'
+import { useCapabilitySpacesMaxQuota, useStore, usePreviewService } from 'web-pkg/src/composables'
+import { SpaceAction } from 'web-pkg/src/composables/actions'
 import {
   useSpaceActionsDelete,
   useSpaceActionsDisable,
@@ -45,13 +49,7 @@ import {
   useSpaceActionsRename,
   useSpaceActionsRestore
 } from 'web-pkg/src/composables/actions/spaces'
-
-import QuotaModal from 'web-pkg/src/components/Spaces/QuotaModal.vue'
-import ReadmeContentModal from 'web-pkg/src/components/Spaces/ReadmeContentModal.vue'
-import { computed, defineComponent, inject, ref, unref, VNodeRef } from 'vue'
-import { SpaceResource } from 'web-client'
-import { useCapabilitySpacesMaxQuota, useStore, usePreviewService } from 'web-pkg/src/composables'
-import { SpaceAction } from 'web-pkg/src/composables/actions'
+import { useSpaceActionsUploadImage } from '../../../composables/actions/spaces/useSpaceActionsUploadImage'
 
 export default defineComponent({
   name: 'SpaceActions',

packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue

@@ -13,9 +13,9 @@
         />
       </div>
       <oc-button
+        v-oc-tooltip="$gettext('Create link')"
         class="oc-ml-s"
         size="small"
-        v-oc-tooltip="$gettext('Create link')"
         :aria-label="$gettext('Create link')"
         @click="createQuickLink"
       >

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -6,11 +6,13 @@
       <app-bar
         :breadcrumbs="breadcrumbs"
         :breadcrumbs-context-actions-items="[currentFolder]"
-        :view-modes="viewModes"
-        :has-bulk-actions="true"
-        :show-actions-on-selection="true"
+        :has-bulk-actions="displayFullAppBar"
+        :show-actions-on-selection="displayFullAppBar"
+        :has-sidebar-toggle="displayFullAppBar"
+        :has-view-options="displayFullAppBar"
         :side-bar-open="sideBarOpen"
         :space="space"
+        :view-modes="viewModes"
       >
         <template #actions="{ limitedScreenSpace }">
           <create-and-upload
@@ -34,8 +36,12 @@
           :side-bar-open="sideBarOpen"
           class="oc-px-m oc-mt-m"
         />
-
-        <no-content-message v-if="isEmpty" id="files-space-empty" class="files-empty" icon="folder">
+        <no-content-message
+          v-if="isCurrentFolderEmpty"
+          id="files-space-empty"
+          class="files-empty"
+          icon="folder"
+        >
           <template #message>
             <span v-text="$gettext('No resources found')" />
           </template>
@@ -75,6 +81,11 @@
             />
           </template>
         </resource-tiles>
+        <resource-details
+          v-else-if="displayResourceAsSingleResource"
+          :single-resource="paginatedResources[0]"
+          :space="space"
+        />
         <resource-table
           v-else
           id="files-space-table"
@@ -153,6 +164,7 @@ import ListInfo from '../../components/FilesList/ListInfo.vue'
 import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import QuickActions from '../../components/FilesList/QuickActions.vue'
+import ResourceDetails from '../../components/FilesList/ResourceDetails.vue'
 import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 import ResourceTiles from '../../components/FilesList/ResourceTiles.vue'
 import SideBar from '../../components/SideBar/SideBar.vue'
@@ -192,6 +204,7 @@ export default defineComponent({
     NotFoundMessage,
     Pagination,
     QuickActions,
+    ResourceDetails,
     ResourceTable,
     ResourceTiles,
     SideBar,
@@ -247,6 +260,12 @@ export default defineComponent({
       return props.space.driveType === 'project' && props.item === '/'
     })
 
+    const folderNotFound = computed(() => store.getters['Files/currentFolder'] === null)
+
+    const isCurrentFolderEmpty = computed(
+      () => unref(resourcesViewDefaults.paginatedResources).length < 1
+    )
+
     const titleSegments = computed(() => {
       const segments = [props.space.name]
       if (props.item !== '/') {
@@ -429,7 +448,9 @@ export default defineComponent({
       ...resourcesViewDefaults,
       canUpload,
       breadcrumbs,
+      folderNotFound,
       hasSpaceHeader,
+      isCurrentFolderEmpty,
       resourceTargetRouteCallback,
       performLoaderTask,
       ViewModeConstants,
@@ -447,12 +468,30 @@ export default defineComponent({
     ...mapGetters('Files', ['currentFolder', 'totalFilesCount', 'totalFilesSize']),
     ...mapGetters(['user', 'configuration']),
 
-    isEmpty() {
-      return this.paginatedResources.length < 1
+    isRunningOnEos() {
+      return !!this.configuration?.options?.runningOnEos
     },
 
-    folderNotFound() {
-      return this.currentFolder === null
+    displayFullAppBar() {
+      return !this.displayResourceAsSingleResource
+    },
+
+    displayResourceAsSingleResource() {
+      if (this.paginatedResources.length !== 1) {
+        return false
+      }
+
+      if (
+        this.isRunningOnEos &&
+        (!this.currentFolder.fileId || this.currentFolder.path === this.paginatedResources[0].path)
+      ) {
+        return true
+      }
+      if (isPublicSpaceResource(this.space) && !this.paginatedResources[0].isFolder) {
+        return true
+      }
+
+      return false
     },
 
     displayThumbnails() {

packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts

@@ -1,9 +1,9 @@
-import GenericSpace from '../../../../src/views/spaces/GenericSpace.vue'
-import { useResourcesViewDefaults } from 'web-app-files/src/composables'
-import { useResourcesViewDefaultsMock } from 'web-app-files/tests/mocks/useResourcesViewDefaultsMock'
 import { ref } from 'vue'
 import { mock, mockDeep } from 'jest-mock-extended'
 import { Resource, SpaceResource } from 'web-client/src/helpers'
+import GenericSpace from 'web-app-files/src/views/spaces/GenericSpace.vue'
+import { useResourcesViewDefaults } from 'web-app-files/src/composables'
+import { useResourcesViewDefaultsMock } from 'web-app-files/tests/mocks/useResourcesViewDefaultsMock'
 import {
   createStore,
   defaultPlugins,
@@ -140,6 +140,48 @@ describe('GenericSpace view', () => {
       expect(wrapper.vm.whitespaceContextMenu).toBeDefined()
     })
   })
+  describe('for a single file', () => {
+    describe('on EOS for single shared resources', () => {
+      it('renders the ResourceDetails component if no currentFolder id is present', () => {
+        const { wrapper } = getMountedWrapper({
+          currentFolder: {},
+          files: [mock<Resource>()],
+          runningOnEos: true
+        })
+        expect(wrapper.find('resource-details-stub').exists()).toBeTruthy()
+      })
+      it('renders the ResourceDetails component if currentFolder path matches single shared resource path', () => {
+        const path = 'foo'
+        const { wrapper } = getMountedWrapper({
+          currentFolder: {
+            ...mock<Resource>(),
+            path
+          },
+          files: [{ ...mock<Resource>(), path }],
+          runningOnEos: true
+        })
+        expect(wrapper.find('resource-details-stub').exists()).toBeTruthy()
+      })
+    })
+    describe('on public links', () => {
+      it('renders the ResourceDetails component', () => {
+        const { wrapper } = getMountedWrapper({
+          currentFolder: {
+            ...mock<Resource>(),
+            fileId: '4'
+          },
+          files: [{ ...mock<Resource>(), isFolder: false }],
+          space: {
+            id: 1,
+            getDriveAliasAndItem: jest.fn(),
+            name: 'Personal space',
+            driveType: 'public'
+          }
+        })
+        expect(wrapper.find('resource-details-stub').exists()).toBeTruthy()
+      })
+    })
+  })
 })
 
 function getMountedWrapper({
@@ -148,7 +190,9 @@ function getMountedWrapper({
   files = [],
   loading = false,
   currentRoute = { name: 'files-spaces-generic', path: '/' },
-  currentFolder = mock<Resource>()
+  currentFolder = mock<Resource>() || {},
+  runningOnEos = false,
+  space = { id: 1, getDriveAliasAndItem: jest.fn(), name: 'Personal space', driveType: '' }
 } = {}) {
   const resourcesViewDetailsMock = useResourcesViewDefaultsMock({
     paginatedResources: ref(files),
@@ -159,10 +203,24 @@ function getMountedWrapper({
     ...defaultComponentMocks({ currentRoute: mock<RouteLocation>(currentRoute) }),
     ...(mocks && mocks)
   }
-  const storeOptions = { ...defaultStoreMockOptions }
+
+  const storeOptions = {
+    ...defaultStoreMockOptions,
+    getters: {
+      ...defaultStoreMockOptions.getters,
+      configuration: function () {
+        return {
+          currentTheme: { general: { slogan: 'Public link slogan' } },
+          options: {
+            runningOnEos
+          }
+        }
+      }
+    }
+  }
   storeOptions.modules.Files.getters.currentFolder.mockReturnValue(currentFolder)
   const propsData = {
-    space: { id: 1, getDriveAliasAndItem: jest.fn(), name: 'Personal space' },
+    space,
     item: '/',
     ...props
   }
@@ -175,7 +233,7 @@ function getMountedWrapper({
       global: {
         plugins: [...defaultPlugins(), store],
         mocks: defaultMocks,
-        stubs: defaultStubs
+        stubs: { ...defaultStubs, 'resource-details': true }
       }
     })
   }

tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md

@@ -18,7 +18,7 @@ Other free text and markdown formatting can be used elsewhere in the document if
 -   [webUISharingPublicManagement/shareByPublicLink.feature:24](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicManagement/shareByPublicLink.feature#L24)
 
 ### [Uploading folders does not work in files-drop](https://github.com/owncloud/web/issues/2443)
--   [webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature:245](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature#L245)
+-   [webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature:268](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature#L268)
 
 ### [Writing to locked files/folders give only a generic error message](https://github.com/owncloud/web/issues/5741)
 -   [webUIWebdavLockProtection/upload.feature:32](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIWebdavLockProtection/upload.feature#L32)

tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md

@@ -53,7 +53,7 @@ Other free text and markdown formatting can be used elsewhere in the document if
 - [webUISharingExpirationDate/shareWithExpirationDate.feature:21](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingExpirationDate/shareWithExpirationDate.feature#L21)
 
 ### [Listing shares via ocs API does not show path for parent folders](https://github.com/owncloud/ocis/issues/1231)
--   [webUISharingPublicManagement/shareByPublicLink.feature:127](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicManagement/shareByPublicLink.feature#L127)
+-   [webUISharingPublicManagement/shareByPublicLink.feature:110](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicManagement/shareByPublicLink.feature#L110)
 
 ### [Propfind response to trashbin endpoint is different in ocis](https://github.com/owncloud/product/issues/186)
 -   [webUIFilesSearch/search.feature:131](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesSearch/search.feature#L131)
@@ -84,7 +84,7 @@ Other free text and markdown formatting can be used elsewhere in the document if
 -   [webUISharingPublicManagement/shareByPublicLink.feature:24](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicManagement/shareByPublicLink.feature#L24)
 
 ### [Uploading folders does not work in files-drop](https://github.com/owncloud/web/issues/2443)
--   [webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature:245](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature#L245)
+-   [webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature:268](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature#L268)
 
 ### [Resources cannot be locked under ocis](https://github.com/owncloud/ocis/issues/1284)
 -   [webUIWebdavLockProtection/delete.feature:33](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIWebdavLockProtection/delete.feature#L33)

tests/acceptance/features/webUIDeleteFilesFolders/deleteFilesFolders.feature

@@ -164,7 +164,7 @@ Feature: deleting files and folders
       |                 | &and#hash       |
     And user "Alice" has shared folder "simple-folder" with link with "read, update, create, delete" permissions in the server
     When the public uses the webUI to access the last public link created by user "Alice" in a new session
-    And the user deletes the following file using the webUI
+    And the user deletes the following single share using the webUI
       | name-parts      |
       | 'single'        |
       | "double" quotes |

tests/acceptance/features/webUIFilesCopy/copy.feature

@@ -81,7 +81,7 @@ Feature: copy files and folders
     When the public uses the webUI to access the last public link created by user "Alice" in a new session
     And the user copies file "data.zip" into folder "simple-empty-folder" using the webUI
     Then breadcrumb for folder "simple-empty-folder" should be displayed on the webUI
-    And file "data.zip" should be listed on the webUI
+    And file "data.zip" should be listed on the webUI as single share
     And as "Alice" file "simple-folder/simple-empty-folder/data.zip" should exist in the server
     And as "Alice" file "simple-folder/data.zip" should exist in the server
 

tests/acceptance/features/webUIMoveFilesFolders/moveFiles.feature

@@ -89,7 +89,7 @@ Feature: move files
     And the public uses the webUI to access the last public link created by user "Alice" in a new session
     And the user moves file "data.zip" into folder "simple-empty-folder" using the webUI
     Then breadcrumb for folder "simple-empty-folder" should be displayed on the webUI
-    And file "data.zip" should be listed on the webUI
+    And file "data.zip" should be listed on the webUI as single share
     And as "Alice" file "simple-folder/simple-empty-folder/data.zip" should exist in the server
     But as "Alice" file "simple-folder/data.zip" should not exist in the server