fix: conflict picker

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

lib/components/ConflictPicker.vue

@@ -2,17 +2,18 @@
 	<NcDialog class="conflict-picker"
 		data-cy-conflict-picker
 		:close-on-click-outside="false"
-		:can-close="false"
+		:can-close="true"
 		:show="opened"
 		:name="name"
 		size="large"
-		@close="onCancel">
+		@closing="onCancel">
 		<!-- Header -->
 		<div class="conflict-picker__header">
 			<!-- Description -->
 			<p id="conflict-picker-description" class="conflict-picker__description">
 				{{ t('Which files do you want to keep?') }}<br>
-				{{ t('If you select both versions, the copied file will have a number added to its name.') }}
+				{{ t('If you select both versions, the copied file will have a number added to its name.') }}<br>
+				{{ t('When an incoming folder is selected, any conflicting files within it will also be overwritten.') }}
 			</p>
 		</div>
 
@@ -49,17 +50,35 @@
 
 		<!-- Controls -->
 		<template #actions>
-			<NcButton data-cy-conflict-picker-skip @click="onSkip">
+			<!-- Cancel the entire operation -->
+			<NcButton :aria-label="t('Cancel')"
+				:title="t('Cancel the entire operation')"
+				data-cy-conflict-picker-cancel
+				type="tertiary"
+				@click="onCancel">
+				<template #icon>
+					<Close :size="20" />
+				</template>
+				{{ t('Cancel') }}
+			</NcButton>
+
+			<!-- Align right -->
+			<span class="dialog__actions-separator" />
+
+			<NcButton :aria-label="skipButtonLabel"
+				data-cy-conflict-picker-skip
+				@click="onSkip">
 				<template #icon>
 					<Close :size="20" />
 				</template>
 				{{ skipButtonLabel }}
 			</NcButton>
-			<NcButton type="primary"
+			<NcButton :aria-label="t('Continue')"
 				:class="{ 'button-vue--disabled': !isEnoughSelected}"
 				:title="isEnoughSelected ? '' : blockedTitle"
-				native-type="submit"
 				data-cy-conflict-picker-submit
+				native-type="submit"
+				type="primary"
 				@click.stop.prevent="onSubmit">
 				<template #icon>
 					<ArrowRight :size="20" />
@@ -75,23 +94,23 @@ import type { ConflictResolutionResult } from '../index.ts'
 import type { PropType } from 'vue'
 
 import { basename, extname } from 'path'
+import { defineComponent } from 'vue'
 import { Node } from '@nextcloud/files'
 import { showError } from '@nextcloud/dialogs'
-import Vue from 'vue'
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import { n, t } from '../utils/l10n.ts'
 import logger from '../utils/logger.ts'
 import NodesPicker from './NodesPicker.vue'
 
 export type NodesPickerRef = InstanceType<typeof NodesPicker>
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'ConflictPicker',
 
 	components: {
@@ -123,6 +142,8 @@ export default Vue.extend({
 		},
 	},
 
+	emits: ['cancel', 'submit'],
+
 	data() {
 		return {
 			// computed list of conflicting files already present in the directory
@@ -207,13 +228,12 @@ export default Vue.extend({
 		},
 	},
 
-	beforeMount() {
+	mounted() {
 		// Using map keep the same order
 		this.files = this.conflicts.map((conflict: File|Node) => {
 			const name = (conflict instanceof File) ? conflict.name : conflict.basename
 			return this.content.find((node: Node) => node.basename === name)
 		}).filter(Boolean) as Node[]
-		logger.debug('ConflictPicker initialised', { files: this.files, conflicts: this.conflicts, content: this.content })
 
 		if (this.conflicts.length === 0 || this.files.length === 0) {
 			const error = new Error('ConflictPicker: files and conflicts must not be empty')
@@ -222,10 +242,13 @@ export default Vue.extend({
 		}
 
 		if (this.conflicts.length !== this.files.length) {
-			const error = new Error('ConflictPicker: files and conflicts must have the same length')
+			const error = new Error('ConflictPicker: files and conflicts must have the same length. Make sure you filter out non conflicting files from the conflicts array.')
 			this.onCancel(error)
 			throw error
 		}
+
+		// Successful initialisation
+		logger.debug('ConflictPicker initialised', { files: this.files, conflicts: this.conflicts, content: this.content })
 	},
 
 	methods: {
@@ -269,11 +292,15 @@ export default Vue.extend({
 				toRename.forEach(file => {
 					const name = (file instanceof File) ? file.name : file.basename
 					const newName = this.getUniqueName(name, directoryContent)
+					// If File, create a new one with the new name
 					if (file instanceof File) {
-						file = new File([file], newName, { type: file.type, lastModified: file.lastModified })
+						// Keep the original file object and force rename
+						Object.defineProperty(file, 'name', { value: newName })
 						renamed.push(file)
 						return
 					}
+
+					// Rename the node
 					file.rename(newName)
 					renamed.push(file)
 				})
@@ -373,17 +400,15 @@ export default Vue.extend({
 		z-index: 10;
 		top: 0;
 		padding: 0 var(--margin);
-		padding-bottom: 0;
+		padding-bottom: var(--secondary-margin);
 	}
 
 	&__form {
 		position: relative;
 		overflow: auto;
 		padding: 0 var(--margin);
-		// 12 px to underlap the header and controls
-		// and have the gradient background visible
-		padding-bottom: 12px;
-		margin-bottom: -12px;
+		// overlap header bottom padding
+		margin-top: calc(-1 * var(--secondary-margin));
 	}
 
 	fieldset {
@@ -425,6 +450,14 @@ export default Vue.extend({
 		opacity: .5;
 		filter: saturate(.7);
 	}
+
+	:deep(.dialog__actions) {
+		width: auto;
+		margin-inline: 12px;
+		span.dialog__actions-separator {
+			margin-left: auto;
+		}
+	}
 }
 
 // Responsive layout
@@ -445,4 +478,16 @@ export default Vue.extend({
 	}
 }
 
+// Responsive layout
+@media screen and (max-width: 512px) {
+	.conflict-picker {
+		:deep(.dialog__actions) {
+			flex-wrap: wrap;
+			span.dialog__actions-separator {
+				// Make the second row wrap
+				width: 100%;
+			}
+		}
+	}
+}
 </style>

lib/components/NodesPicker.vue

@@ -9,7 +9,10 @@
 			@update:checked="onUpdateIncomingChecked">
 			<span class="node-picker node-picker--incoming">
 				<!-- Icon or preview -->
-				<FileSvg v-if="!incomingPreview" class="node-picker__icon" :size="48" />
+				<template v-if="!incomingPreview">
+					<FolderSvg v-if="isFolder(existing)" class="node-picker__icon" :size="48" />
+					<FileSvg v-else class="node-picker__icon" :size="48" />
+				</template>
 				<img v-else
 					class="node-picker__preview"
 					:src="incomingPreview"
@@ -32,7 +35,10 @@
 			@update:checked="onUpdateExistingChecked">
 			<span class="node-picker node-picker--existing">
 				<!-- Icon or preview -->
-				<FileSvg v-if="!existingPreview" class="node-picker__icon" :size="48" />
+				<template v-if="!existingPreview">
+					<FolderSvg v-if="isFolder(existing)" class="node-picker__icon" :size="48" />
+					<FileSvg v-else class="node-picker__icon" :size="48" />
+				</template>
 				<img v-else
 					class="node-picker__preview"
 					:src="existingPreview"
@@ -53,33 +59,35 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 
+import { defineComponent } from 'vue'
 import { File as NcFile, Folder, formatFileSize, FileType, Node } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
-import moment from 'moment'
-import Vue from 'vue'
+import moment from '@nextcloud/moment'
 
 import FileSvg from 'vue-material-design-icons/File.vue'
+import FolderSvg from 'vue-material-design-icons/Folder.vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 import { t } from '../utils/l10n.ts'
 
 const PREVIEW_SIZE = 64
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'NodesPicker',
 
 	components: {
 		FileSvg,
+		FolderSvg,
 		NcCheckboxRadioSwitch,
 	},
 
 	props: {
 		incoming: {
-			type: [Node, File, NcFile, Folder],
+			type: Object as PropType<File|Node|Folder|NcFile>,
 			required: true,
 		},
 		existing: {
-			type: [NcFile, Folder],
+			type: Object as PropType<Folder|NcFile>,
 			required: true,
 		},
 		newSelected: {
@@ -166,6 +174,11 @@ export default Vue.extend({
 			}
 		},
 
+		isFolder(node: File|Node): boolean {
+			return node.type === FileType.Folder
+				|| node.type === 'httpd/unix-directory'
+		},
+
 		isChecked(node: Node, selected: Node[]): boolean {
 			return selected.includes(node)
 		},
@@ -241,6 +254,10 @@ $height: 64px;
 
 	&__icon {
 		color: var(--color-text-maxcontrast);
+
+		&.folder-icon {
+			color: var(--color-primary-element);
+		}
 	}
 
 	&__preview {

lib/components/UploadPicker.vue

@@ -81,10 +81,10 @@
 import type { Entry, Node } from '@nextcloud/files'
 import type { PropType } from 'vue'
 
+import { defineComponent } from 'vue'
 import { getNewFileMenuEntries, Folder } from '@nextcloud/files'
 import { showError } from '@nextcloud/dialogs'
 import makeEta from 'simple-eta'
-import Vue from 'vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
@@ -102,8 +102,9 @@ import { Status as UploadStatus } from '../upload.ts'
 import { t } from '../utils/l10n.ts'
 import logger from '../utils/logger.ts'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'UploadPicker',
+
 	components: {
 		Cancel,
 		NcActionButton,
@@ -318,7 +319,6 @@ export default Vue.extend({
 				return
 			}
 
-			logger.debug('Destination set', { destination })
 			this.uploadManager.destination = destination
 
 			// If the destination change, we need to refresh the menu

lib/index.ts

@@ -1,7 +1,9 @@
 import type { Node } from '@nextcloud/files'
+import type { AsyncComponent } from 'vue'
 
 import { Uploader } from './uploader'
 import UploadPicker from './components/UploadPicker.vue'
+import Vue, { defineAsyncComponent } from 'vue'
 
 export type { Uploader } from './uploader'
 export { Status as UploaderStatus } from './uploader'
@@ -53,31 +55,35 @@ export function upload(destinationPath: string, file: File): Uploader {
  * @return {Promise<ConflictResolutionResult>} the selected and renamed files
  */
 export async function openConflictPicker(dirname: string, conflicts: (File|Node)[], content: Node[]): Promise<ConflictResolutionResult> {
-	const { default: ConflictPicker } = await import('./components/ConflictPicker.vue')
+	const ConflictPicker = defineAsyncComponent(() => import('./components/ConflictPicker.vue')) as AsyncComponent
 	return new Promise((resolve, reject) => {
-		const picker = new ConflictPicker({
-			propsData: {
-				dirname,
-				conflicts,
-				content,
-			},
-		})
-
-		// Add listeners
-		picker.$on('submit', (results: ConflictResolutionResult) => {
-			// Return the results
-			resolve(results)
-
-			// Destroy the component
-			picker.$destroy()
-			picker.$el?.parentNode?.removeChild(picker.$el)
-		})
-		picker.$on('cancel', (error?: Error) => {
-			reject(error ?? new Error('Canceled'))
-
-			// Destroy the component
-			picker.$destroy()
-			picker.$el?.parentNode?.removeChild(picker.$el)
+		const picker = new Vue({
+			name: 'ConflictPickerRoot',
+			render: (h) => h(ConflictPicker, {
+				props: {
+					dirname,
+					conflicts,
+					content,
+				},
+				on: {
+					submit(results: ConflictResolutionResult) {
+						// Return the results
+						resolve(results)
+
+						// Destroy the component
+						picker.$destroy()
+						picker.$el?.parentNode?.removeChild(picker.$el)
+					},
+					cancel(error?: Error) {
+						// Reject the promise
+						reject(error ?? new Error('Canceled'))
+
+						// Destroy the component
+						picker.$destroy()
+						picker.$el?.parentNode?.removeChild(picker.$el)
+					},
+				},
+			}),
 		})
 
 		// Mount the component

lib/uploader.ts

@@ -85,6 +85,8 @@ export class Uploader {
 		if (!folder) {
 			throw new Error('Invalid destination folder')
 		}
+
+		logger.debug('Destination set', { folder })
 		this._destinationFolder = folder
 	}