[stable28] fix(files): Close sidebar on navigation

apps/files/src/views/FilesList.vue

@@ -434,6 +434,9 @@ export default defineComponent({
 			// TODO: preserve selection on browsing?
 			this.selectionStore.reset()
 			this.resetSearch()
+			if (window.OCA.Files.Sidebar?.close) {
+				window.OCA.Files.Sidebar.close()
+			}
 			this.fetchContent()
 
 			// Scroll to top, force virtual scroller to re-render

apps/files/src/views/Sidebar.vue

@@ -110,7 +110,7 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { File, Folder, formatFileSize } from '@nextcloud/files'
 import { encodePath } from '@nextcloud/paths'
 import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
-import { Type as ShareTypes } from '@nextcloud/sharing'
+import { ShareTypes } from '@nextcloud/sharing'
 import { mdiStar, mdiStarOutline } from '@mdi/js'
 import axios from '@nextcloud/axios'
 import $ from 'jquery'

apps/files_sharing/src/files_sharing_tab.js

@@ -73,12 +73,16 @@ window.addEventListener('DOMContentLoaded', function() {
 				await TabInstance.update(fileInfo)
 				TabInstance.$mount(el)
 			},
+
 			update(fileInfo) {
 				TabInstance.update(fileInfo)
 			},
+
 			destroy() {
-				TabInstance.$destroy()
-				TabInstance = null
+				if (TabInstance) {
+					TabInstance.$destroy()
+					TabInstance = null
+				}
 			},
 		}))
 	}

cypress.config.ts

@@ -46,6 +46,8 @@ export default defineConfig({
 		// Disable session isolation
 		testIsolation: false,
 
+		requestTimeout: 30000,
+
 		// We've imported your old cypress plugins here.
 		// You may want to clean this up later by importing these.
 		async setupNodeEvents(on, config) {

cypress/e2e/files/files-sidebar.cy.ts

@@ -1,27 +1,11 @@
 /**
- * @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de>
- *
- * @author Ferdinand Thiessen <opensource@fthiessen.de>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
 import type { User } from '@nextcloud/cypress'
 import { getRowForFile, navigateToFolder, triggerActionForFile } from './FilesUtils'
+import { assertNotExistOrNotVisible } from '../settings/usersUtils'
 
 describe('Files: Sidebar', { testIsolation: true }, () => {
 	let user: User
@@ -43,7 +27,10 @@ describe('Files: Sidebar', { testIsolation: true }, () => {
 
 		triggerActionForFile('file', 'details')
 
-		cy.get('[data-cy-sidebar]').should('be.visible')
+		cy.get('[data-cy-sidebar]')
+			.should('be.visible')
+			.findByRole('heading', { name: 'file' })
+			.should('be.visible')
 	})
 
 	it('changes the current fileid', () => {
@@ -56,22 +43,63 @@ describe('Files: Sidebar', { testIsolation: true }, () => {
 		cy.url().should('contain', `apps/files/files/${fileId}`)
 	})
 
-	it('closes the sidebar on delete', () => {
+	it('changes the sidebar content on other file', () => {
 		cy.visit('/apps/files')
 		getRowForFile('file').should('be.visible')
 
+		triggerActionForFile('file', 'details')
+
+		cy.get('[data-cy-sidebar]')
+			.should('be.visible')
+			.findByRole('heading', { name: 'file' })
+			.should('be.visible')
+
+		triggerActionForFile('folder', 'details')
+		cy.get('[data-cy-sidebar]')
+			.should('be.visible')
+			.findByRole('heading', { name: 'folder' })
+			.should('be.visible')
+	})
+
+	it('closes the sidebar on navigation', () => {
+		cy.visit('/apps/files')
+
+		getRowForFile('file').should('be.visible')
+		getRowForFile('folder').should('be.visible')
+
 		// open the sidebar
 		triggerActionForFile('file', 'details')
 		// validate it is open
-		cy.get('[data-cy-sidebar]').should('be.visible')
-		// wait for the sidebar to be settled
-		cy.wait(500)
+		cy.get('[data-cy-sidebar]')
+			.should('be.visible')
+
+		// if we navigate to the folder
+		navigateToFolder('folder')
+		// the sidebar should not be visible anymore
+		cy.get('[data-cy-sidebar]')
+			.should(assertNotExistOrNotVisible)
+	})
 
+	it('closes the sidebar on delete', () => {
+		cy.intercept('DELETE', `**/remote.php/dav/files/${user.userId}/file`).as('deleteFile')
+		// visit the files app
+		cy.visit('/apps/files')
+		getRowForFile('file').should('be.visible')
+		// open the sidebar
+		triggerActionForFile('file', 'details')
+		// validate it is open
+		cy.get('[data-cy-sidebar]').should('be.visible')
+		// delete the file
 		triggerActionForFile('file', 'delete')
-		cy.get('[data-cy-sidebar]').should('not.exist')
+		cy.wait('@deleteFile', { timeout: 10000 })
+		// see the sidebar is closed
+		cy.get('[data-cy-sidebar]')
+			.should(assertNotExistOrNotVisible)
 	})
 
 	it('changes the fileid on delete', () => {
+		cy.intercept('DELETE', `**/remote.php/dav/files/${user.userId}/folder/other`).as('deleteFile')
+
 		cy.uploadContent(user, new Blob([]), 'text/plain', '/folder/other').then((response) => {
 			const otherFileId = Number.parseInt(response.headers['oc-fileid'] ?? '0')
 			cy.login(user)
@@ -86,10 +114,10 @@ describe('Files: Sidebar', { testIsolation: true }, () => {
 			// validate it is open
 			cy.get('[data-cy-sidebar]').should('be.visible')
 			cy.url().should('contain', `apps/files/files/${otherFileId}`)
-			// wait for the sidebar to be settled
-			cy.wait(500)
 
 			triggerActionForFile('other', 'delete')
+			cy.wait('@deleteFile')
+
 			cy.get('[data-cy-sidebar]').should('not.exist')
 			// Ensure the URL is changed
 			cy.url().should('not.contain', `apps/files/files/${otherFileId}`)

cypress/support/commands.ts

@@ -27,6 +27,7 @@ import { addCommands, User } from '@nextcloud/cypress'
 import { basename } from 'path'
 
 // Add custom commands
+import '@testing-library/cypress/add-commands'
 import 'cypress-if'
 import 'cypress-wait-until'
 addCommands()