[full-ci] Fix #4893: Make sure filenames (and extensions) are properly updated in file list and sidebar after rename

.drone.env

@@ -1,3 +1,3 @@
 # The version of OCIS to use in pipelines that test against OCIS
-OCIS_COMMITID=0d34ed55f0b0b72516b65a463e86f55792e94b2c
+OCIS_COMMITID=2856bcdef2f66297b548797cc31cc3c34c47cce2
 OCIS_BRANCH=master

changelog/unreleased/bugfix-contextmenu-public-links

@@ -0,0 +1,5 @@
+Bugfix: Contextmenu on public links
+
+We fixed an issue of the contextmenu not being displayed for the files table on public links.
+
+https://github.com/owncloud/web/issues/6123

changelog/unreleased/bugfix-file-rename

@@ -0,0 +1,6 @@
+Bugfix: File renaming
+
+We fixed the displayed file name not being properly updated in files list and sidebar after renaming.
+
+https://github.com/owncloud/web/issues/4893
+https://github.com/owncloud/web/pull/6114

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

@@ -93,7 +93,7 @@ import { DavProperties } from 'web-pkg/src/constants'
 import MixinRoutes from '../../mixins/routes'
 import { buildResource } from '../../helpers/resources'
 import { isTrashbinRoute } from '../../helpers/route'
-
+import { computed } from '@vue/composition-api'
 import FileInfo from './FileInfo.vue'
 
 let visibilityObserver
@@ -104,14 +104,9 @@ export default {
   mixins: [MixinRoutes],
 
   provide() {
-    const displayedItem = {}
-
-    Object.defineProperty(displayedItem, 'value', {
-      enumerable: true,
-      get: () => this.selectedFile
-    })
-
-    return { displayedItem }
+    return {
+      displayedItem: computed(() => this.selectedFile)
+    }
   },
 
   data() {
@@ -214,9 +209,7 @@ export default {
         return
       }
 
-      if (newFile.id !== oldFile?.id) {
-        this.fetchFileInfo()
-      }
+      this.fetchFileInfo()
     },
 
     highlightedFileThumbnail(thumbnail) {

packages/web-app-files/src/helpers/resources.js

@@ -29,6 +29,17 @@ function _getFileExtension(name) {
   return extension.replace(/^(.)/, '')
 }
 
+export function renameResource(resource, newName, newPath) {
+  const isFolder = resource.type === 'dir'
+  const extension = _getFileExtension(newName)
+
+  resource.name = newName
+  resource.path = '/' + newPath + newName
+  resource.extension = isFolder ? '' : extension
+
+  return resource
+}
+
 export function buildResource(resource) {
   const isFolder = resource.type === 'dir'
   const extension = _getFileExtension(resource.name)

packages/web-app-files/src/store/mutations.js

@@ -3,6 +3,7 @@ import pickBy from 'lodash-es/pickBy'
 import { DateTime } from 'luxon'
 import { set, has } from 'lodash-es'
 import { getIndicators } from '../helpers/statusIndicators'
+import { renameResource } from '../helpers/resources'
 
 export default {
   UPDATE_FILE_PROGRESS(state, file) {
@@ -114,8 +115,7 @@ export default {
       return f.id === file.id
     })
 
-    resources[fileIndex].name = newValue
-    resources[fileIndex].path = '/' + newPath + newValue
+    renameResource(resources[fileIndex], newValue, newPath)
 
     state.files = resources
   },

packages/web-app-files/src/views/PublicFiles.vue

@@ -30,7 +30,7 @@
         @rowMounted="rowMounted"
       >
         <template #contextMenu="{ resource }">
-          <context-actions v-if="isResourceInSelection(resource)" :items="[resource]" />
+          <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
           <pagination :pages="paginationPages" :current-page="paginationPage" />

packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js

@@ -1,11 +1,13 @@
 import { mount, createLocalVue } from '@vue/test-utils'
+import VueCompositionAPI from '@vue/composition-api'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import GetTextPlugin from 'vue-gettext'
 
 import fileSideBars from '@files/src/fileSideBars'
 import stubs from '@/tests/unit/stubs'
 import Files from '@/__fixtures__/files'
+import { buildResource, renameResource } from '@files/src/helpers/resources'
 
 import SideBar from '@files/src/components/SideBar/SideBar.vue'
 
@@ -20,6 +22,7 @@ const simpleOwnFolder = {
 function createWrapper({ item, selectedItems, mocks }) {
   const localVue = createLocalVue()
   localVue.use(Vuex)
+  localVue.use(VueCompositionAPI)
   localVue.use(VueRouter)
   localVue.use(GetTextPlugin, {
     translations: 'does-not-matter.json',
@@ -46,10 +49,18 @@ function createWrapper({ item, selectedItems, mocks }) {
         },
         Files: {
           namespaced: true,
+          state: {
+            highlightedFile: item
+          },
           getters: {
-            highlightedFile: () => item,
+            highlightedFile: (state) => state.highlightedFile,
             selectedFiles: () => selectedItems
           },
+          mutations: {
+            SET_HIGHLIGHTED_FILE(state, file) {
+              state.highlightedFile = file
+            }
+          },
           modules: {
             sidebar: {
               namespaced: true,
@@ -85,6 +96,34 @@ describe('SideBar', () => {
     expect(mockFileInfo).toHaveBeenCalledTimes(1)
   })
 
+  it('fetches file info if the selected item changes', async () => {
+    const spyOnFetchFileInfo = jest
+      .spyOn(SideBar.methods, 'fetchFileInfo')
+      .mockImplementation(jest.fn)
+
+    const wrapper = createWrapper({
+      item: simpleOwnFolder,
+      selectedItems: [simpleOwnFolder]
+    })
+
+    // fetchFileInfo is called once in created()
+    expect(spyOnFetchFileInfo).toHaveBeenCalledTimes(1)
+
+    // it should be called again when a different file is loaded
+    const resource = buildResource(Files['/'][4])
+    wrapper.vm.$store.commit('Files/SET_HIGHLIGHTED_FILE', resource)
+    await wrapper.vm.$nextTick()
+    expect(spyOnFetchFileInfo).toHaveBeenCalledTimes(2)
+
+    // and again if the file is renamed
+    const renamedResource = renameResource(Object.assign({}, resource), 'foobar.png', '')
+    wrapper.vm.$store.commit('Files/SET_HIGHLIGHTED_FILE', Object.assign(renamedResource))
+    await wrapper.vm.$nextTick()
+    expect(spyOnFetchFileInfo).toHaveBeenCalledTimes(3)
+
+    jest.resetAllMocks()
+  })
+
   it('does not fetch file info if multiple items are selected', () => {
     const mockFileInfo = jest.fn()
 

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

@@ -107,8 +107,6 @@ Other free text and markdown formatting can be used elsewhere in the document if
 ### [share indicator in files are not shown until sharing sidebar is opened](https://github.com/owncloud/web/issues/4167)
 -   [webUISharingInternalUsersSharingIndicator/shareWithUsers.feature:100](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersSharingIndicator/shareWithUsers.feature#L100)
 -   [webUISharingInternalUsersSharingIndicator/shareWithUsers.feature:121](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersSharingIndicator/shareWithUsers.feature#L121)
--   [webUISharingPublicManagement/publicLinkIndicator.feature:12](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicManagement/publicLinkIndicator.feature#L12)
--   [webUISharingPublicManagement/publicLinkIndicator.feature:47](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicManagement/publicLinkIndicator.feature#L47)
 -   [webUISharingPublicManagement/publicLinkIndicator.feature:64](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicManagement/publicLinkIndicator.feature#L64)
 -   [webUISharingPublicManagement/publicLinkIndicator.feature:81](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicManagement/publicLinkIndicator.feature#L81)
 -   [webUISharingPublicManagement/publicLinkIndicator.feature:98](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingPublicManagement/publicLinkIndicator.feature#L98)

tests/acceptance/features/webUIFilesCopy/copy.feature

@@ -35,7 +35,7 @@ Feature: copy files and folders
   @smokeTest @ocisSmokeTest
   Scenario: Copy multiple files at once
     Given user "Alice" has uploaded file "data.zip" to "data.zip"
-    And user "Alice" has created file "lorem.txt"
+    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
     And user "Alice" has uploaded file "new-data.zip" to "testapp.zip"
     And user "Alice" has created folder "simple-empty-folder"
     And user "Alice" has logged in using the webUI
@@ -54,7 +54,7 @@ Feature: copy files and folders
 
 
   Scenario Outline: copy a file into a folder (problematic characters)
-    Given user "Alice" has created file "lorem.txt"
+    Given user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
     And user "Alice" has created folder "simple-empty-folder"
     And user "Alice" has logged in using the webUI
     And the user has browsed to the files page

tests/smoke/support/cta/files/sidebar.ts

@@ -25,7 +25,7 @@ export const openPanel = async ({
     await backElement.click()
   }
 
-  const panelOpenElement = await page.$(`#sidebar-panel-${name}-item-select`)
+  const panelOpenElement = await page.locator(`#sidebar-panel-${name}-item-select`)
   if (panelOpenElement) {
     await panelOpenElement.click()
   }

tests/smoke/support/page/files/allFiles.ts

@@ -95,7 +95,7 @@ export class AllFilesPage {
 
       const [download] = await Promise.all([
         page.waitForEvent('download'),
-        page.click('.oc-files-actions-download-file-trigger')
+        page.click('#oc-files-actions-sidebar .oc-files-actions-download-file-trigger')
       ])
 
       await cta.files.sidebar.close({ page: page })