Merge pull request #1313 from nextcloud-libraries/fix/new-menu-curren…

…t-content fix: Always request current content when triggering a menu entry
nextcloud-libraries · Aug 2, 2024 · 6e82ad3 · 6e82ad3
2 parents 7bef1d8 + 9768088
commit 6e82ad3
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 271 deletions.
diff --git a/cypress/components/UploadPicker.cy.ts b/cypress/components/UploadPicker.cy.ts
@@ -10,13 +10,23 @@ import { generateRemoteUrl } from '@nextcloud/router'
 import { UploadPicker, getUploader } from '../../lib/index.ts'
 import { basename } from 'path'
 
-describe('UploadPicker rendering', () => {
-	afterEach(() => {
-		// Make sure we clear the body
+let state: string | undefined
+before(() => {
+	cy.window().then((win) => {
+		state = win.document.body.innerHTML
+	})
+})
+
+const resetDocument = () => {
+	if (state) {
 		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
+			win.document.body.innerHTML = state!
 		})
-	})
+	}
+}
+
+describe('UploadPicker rendering', () => {
+	afterEach(() => resetDocument())
 
 	it('Renders default UploadPicker', () => {
 		const propsData = {
@@ -66,12 +76,7 @@ describe('UploadPicker valid uploads', () => {
 		cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
 	})
 
-	afterEach(() => {
-		// Make sure we clear the body
-		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
-		})
-	})
+	afterEach(() => resetDocument())
 
 	it('Uploads a file', () => {
 		// Intercept single upload
@@ -117,12 +122,7 @@ describe('UploadPicker invalid uploads', { testIsolation: true }, () => {
 		getUploader(false, true)
 	})
 
-	afterEach(() => {
-		// Make sure we clear the body
-		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
-		})
-	})
+	afterEach(() => resetDocument())
 
 	it('Fails a file if forbidden character', () => {
 		// Make sure we reset the destination
@@ -287,12 +287,7 @@ describe('NewFileMenu handling', () => {
 		addNewFileMenuEntry(entry)
 	})
 
-	afterEach(() => {
-		// Make sure we clear the body
-		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
-		})
-	})
+	afterEach(() => resetDocument())
 
 	it('Open the New File Menu', () => {
 		// Mount picker
@@ -377,12 +372,7 @@ describe('UploadPicker valid uploads', () => {
 		cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
 	})
 
-	afterEach(() => {
-		// Make sure we clear the body
-		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
-		})
-	})
+	afterEach(() => resetDocument())
 
 	it('Uploads a file with chunking', () => {
 		// Init and reset chunk request spy
@@ -481,12 +471,7 @@ describe('Destination management', () => {
 		}),
 	}
 
-	afterEach(() => {
-		// Make sure we clear the body
-		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
-		})
-	})
+	afterEach(() => resetDocument())
 
 	it('Upload then changes the destination', () => {
 		// Mount picker
@@ -557,12 +542,7 @@ describe('Root management', () => {
 		}),
 	}
 
-	afterEach(() => {
-		// Make sure we clear the body
-		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
-		})
-	})
+	afterEach(() => resetDocument())
 
 	it('Upload then changes the root', () => {
 		// Mount picker
@@ -659,12 +639,7 @@ describe('UploadPicker notify testing', () => {
 		cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
 	})
 
-	afterEach(() => {
-		// Make sure we clear the body
-		cy.window().then((win) => {
-			win.document.body.innerHTML = '<div data-cy-root></div>'
-		})
-	})
+	afterEach(() => resetDocument())
 
 	it('Uploads a file without chunking', () => {
 		const notify = cy.spy()

diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -12,6 +12,8 @@
 
 		<!-- Nextcloud customizations -->
 		<link href="https://nextcloud.github.io/server/apps/theming/css/default.css" rel="stylesheet" />
+		<link href="https://nextcloud.github.io/server/core/css/server.css" rel="stylesheet" />
+		<link href="https://nextcloud.github.io/server/core/css/apps.css" rel="stylesheet" />
 		<script type="text/javascript">
 			// mocking the webroot for @nextcloud/router
 			window._oc_webroot = ''
@@ -25,6 +27,11 @@
 		</script>
 	</head>
 	<body>
-		<div data-cy-root></div>
+		<header id="header" style="height: var(--header-height); width: 100%; position: absolute;"></header>
+		<main id="content">
+		<div id="app-content">
+			<div data-cy-root></div>
+		</div>
+		</main>
 	</body>
 </html>
diff --git a/lib/components/UploadPicker.vue b/lib/components/UploadPicker.vue
@@ -57,7 +57,7 @@
 				:close-after-click="true"
 				:data-cy-upload-picker-menu-entry="entry.id"
 				class="upload-picker__menu-entry"
-				@click="entry.handler(destination, currentContent)">
+				@click="onClick(entry)">
 				<template v-if="entry.iconSvgInline" #icon>
 					<NcIconSvgWrapper :svg="entry.iconSvgInline" />
 				</template>
@@ -74,7 +74,7 @@
 					:close-after-click="true"
 					:data-cy-upload-picker-menu-entry="entry.id"
 					class="upload-picker__menu-entry"
-					@click="entry.handler(destination, currentContent)">
+					@click="onClick(entry)">
 					<template v-if="entry.iconSvgInline" #icon>
 						<NcIconSvgWrapper :svg="entry.iconSvgInline" />
 					</template>
@@ -91,7 +91,7 @@
 					:close-after-click="true"
 					:data-cy-upload-picker-menu-entry="entry.id"
 					class="upload-picker__menu-entry"
-					@click="entry.handler(destination, currentContent)">
+					@click="onClick(entry)">
 					<template v-if="entry.iconSvgInline" #icon>
 						<NcIconSvgWrapper :svg="entry.iconSvgInline" />
 					</template>
@@ -233,7 +233,6 @@ export default Vue.extend({
 			eta: null,
 			timeLeft: '',
 
-			currentContent: [] as Node[],
 			newFileMenuEntries: [] as Entry[],
 			uploadManager: getUploader(),
 		}
@@ -307,13 +306,6 @@ export default Vue.extend({
 			},
 		},
 
-		content: {
-			immediate: true,
-			async handler() {
-				this.currentContent = await this.getContent()
-			},
-		},
-
 		destination(destination) {
 			this.setDestination(destination)
 		},
@@ -350,6 +342,17 @@ export default Vue.extend({
 	},
 
 	methods: {
+		/**
+		 * Handle clicking a new-menu entry
+		 * @param entry The entry that was clicked
+		 */
+		async onClick(entry: Entry) {
+			entry.handler(
+				this.destination!,
+				await this.getContent().catch(() => []),
+			)
+		},
+
 		/**
 		 * Trigger file picker
 		 * @param uploadFolders Upload folders
@@ -408,7 +411,7 @@ export default Vue.extend({
 
 		async handleConflicts(nodes: Array<File|Directory>, path: string): Promise<Array<File|Directory>|false> {
 			try {
-				const content = path === '' ? this.currentContent : await this.getContent(path).catch(() => [])
+				const content = await this.getContent(path).catch(() => [])
 				const conflicts = getConflicts(nodes, content)
 
 				// First handle conflicts as this might already remove invalid files