fix(conflict): label buttons properly for unsaved local changes

Conflicts with unsaved changes in indexed db work differently.
When the file is overwritten on the server while editing
the editing session keeps going and the new file version is shown read only.

When opening the file and a conflicting version is found in indexed db
that local version is shown read only allowing to connect to a new session.

Signed-off-by: Max <[email protected]>

Author: max-nextcloud

cypress/e2e/conflict.spec.js

@@ -73,10 +73,10 @@ variants.forEach(function ({ fixture, mime }) {
 				cy.openFile(fileName)
 				cy.intercept({ method: 'POST', url: '**/session/*/push' }).as('push')
 				cy.wait('@push')
-				cy.get('[data-cy="resolveThisVersion"]').click()
+				cy.get('[data-cy="useEditorVersion"]').click()
 
 				getWrapper().should('not.exist')
-				cy.get('[data-cy="resolveThisVersion"]').should('not.exist')
+				cy.get('[data-cy="useEditorVersion"]').should('not.exist')
 				cy.getContent().should('contain', 'cruel conflicting')
 			},
 		)
@@ -85,11 +85,11 @@ variants.forEach(function ({ fixture, mime }) {
 			createConflict(fileName, 'edited-' + fileName, mime)
 
 			cy.openFile(fileName)
-			cy.get('[data-cy="resolveServerVersion"]').click()
+			cy.get('[data-cy="useReaderVersion"]').click()
 
 			getWrapper().should('not.exist')
-			cy.get('[data-cy="resolveThisVersion"]').should('not.exist')
-			cy.get('[data-cy="resolveServerVersion"]').should('not.exist')
+			cy.get('[data-cy="useEditorVersion"]').should('not.exist')
+			cy.get('[data-cy="useReaderVersion"]').should('not.exist')
 			cy.getContent().should('contain', 'Hello world')
 			cy.getContent().should('not.contain', 'cruel conflicting')
 		})

playwright/e2e/indexed-db.spec.ts

@@ -37,23 +37,32 @@ test('recovering from indexed db', async ({
 	await expect(editor.saveIndicator).toHaveAttribute('title', /Unsaved changes/)
 })
 
-test('conflict when recovering from indexed db', async ({
-	close,
-	editor,
-	file,
-	reader,
-	setOffline,
-	setOnline,
-	user,
-}) => {
-	await expect(editor.el).toBeVisible()
-	await setOffline()
-	await editor.typeHeading('Hello world')
-	await close()
-	await setOnline()
-	await user.uploadFile({ name: file.name, content: '## Good bye' })
-	await file.open()
-	await expect(editor.getHeading({ name: 'Good bye' })).toBeVisible()
-	await expect(reader.getHeading({ name: 'Hello world' })).toBeVisible()
-	await expect(editor.offlineState).not.toBeVisible()
-})
+;[
+	{ source: 'local', buttonName: /Overwrite the file and save /, headingName: 'Hello world' },
+	{ source: 'server', buttonName: /Discard the changes and edit /, headingName: 'Good bye' },
+].forEach(({ source, buttonName, headingName }) => {
+	test(`resolve conflict with ${source} version`, async ({
+		close,
+		container,
+		editor,
+		file,
+		reader,
+		setOffline,
+		setOnline,
+		user,
+	}) => {
+		await expect(editor.el).toBeVisible()
+		await setOffline()
+		await editor.typeHeading('Hello world')
+		await close()
+		await setOnline()
+		await user.uploadFile({ name: file.name, content: '## Good bye' })
+		await file.open()
+		await expect(editor.getHeading({ name: 'Good bye' })).toBeVisible()
+		await expect(reader.getHeading({ name: 'Hello world' })).toBeVisible()
+		await container.getButton({ name: buttonName }).click()
+		await expect(reader.el).not.toBeVisible()
+		await expect(editor.getHeading({ name: headingName })).toBeVisible()
+	})
+
+});

playwright/support/fixtures/editor.ts

@@ -6,10 +6,12 @@
 import { test as baseTest } from '@playwright/test'
 import { EditorSection } from '../sections/EditorSection'
 import { ReaderSection } from '../sections/ReaderSection'
+import { ContainerSection } from '../sections/ContainerSection'
 
 interface EditorFixture {
 	editor: EditorSection
 	reader: ReaderSection
+	container: ContainerSection
 }
 
 export const test = baseTest.extend<EditorFixture>({
@@ -21,4 +23,8 @@ export const test = baseTest.extend<EditorFixture>({
 		const reader = new ReaderSection(page)
 		await use(reader)
 	},
+	container: async ({ page }, use) => {
+		const container = new ContainerSection(page)
+		await use(container)
+	},
 })

src/components/CollisionResolveDialog.vue

@@ -12,18 +12,16 @@
 			:wide="true"
 			size="large"
 			:disabled="clicked"
-			data-cy="resolveThisVersion"
-			@click="resolveThisVersion">
-			{{ t('text', 'Overwrite the file and save the current changes') }}
+			data-cy="useEditorVersion"
+			@click="useEditorVersion">
+			{{ textForSource[editorSource] }}
 		</NcButton>
 		<NcButton
 			:wide="true"
 			:disabled="clicked"
-			data-cy="resolveServerVersion"
-			@click="resolveServerVersion">
-			{{
-				t('text', 'Discard the current changes and load the latest version')
-			}}
+			data-cy="useReaderVersion"
+			@click="useReaderVersion">
+			{{ textForSource[readerSource] }}
 		</NcButton>
 	</div>
 </template>
@@ -35,6 +33,7 @@ import { useEditor } from '../composables/useEditor.ts'
 import { useEditorMethods } from '../composables/useEditorMethods.ts'
 import { useSaveService } from '../composables/useSaveService.ts'
 import { useSyncService } from '../composables/useSyncService.ts'
+import { logger } from '../helpers/logger'
 export default {
 	name: 'CollisionResolveDialog',
 	components: {
@@ -45,13 +44,27 @@ export default {
 			type: String,
 			required: true,
 		},
+		readerSource: {
+			type: String,
+			required: true,
+		},
 	},
-	setup() {
+	setup(props) {
+		if (!['local', 'server'].includes(props.readerSource)) {
+			logger.warn('Invalid reader source', props)
+		}
 		const { editor } = useEditor()
 		const { syncService } = useSyncService()
 		const { saveService } = useSaveService()
 		const { setContent, setEditable } = useEditorMethods(editor)
+		const editorSource = props.readerSource === 'local' ? 'server' : 'local'
+		const textForSource = {
+			local: t('text', 'Overwrite the file and save the unsaved changes'),
+			server: t('text', 'Discard the changes and edit the latest version'),
+		}
 		return {
+			editorSource,
+			textForSource,
 			setContent,
 			setEditable,
 			saveService,
@@ -65,16 +78,22 @@ export default {
 		}
 	},
 	methods: {
-		resolveThisVersion() {
+		useEditorVersion() {
 			this.clicked = true
-			this.saveService.forceSave().then(() => this.syncService.syncUp())
+			this.saveService.forceSave().then(() => {
+				this.syncService.syncUp()
+				this.$emit('resolved')
+			})
 			this.setEditable(!this.readOnly)
 		},
-		resolveServerVersion() {
+		useReaderVersion() {
 			this.clicked = true
 			this.setEditable(!this.readOnly)
 			this.setContent(this.otherVersion)
-			this.saveService.forceSave().then(() => this.syncService.syncUp())
+			this.saveService.forceSave().then(() => {
+				this.syncService.syncUp()
+				this.$emit('resolved')
+			})
 		},
 	},
 }

src/components/Editor.vue

@@ -12,7 +12,11 @@
 		:class="{ 'is-mobile': isMobile }"
 		tabindex="-1">
 		<SkeletonLoading v-if="showLoadingSkeleton" />
-		<CollisionResolveDialog v-if="isResolvingConflict" :other-version="otherVersion" />
+		<CollisionResolveDialog
+			v-if="isResolvingConflict"
+			:other-version="otherVersion"
+			:reader-source="localChange ? 'local' : 'server'"
+			@resolved="$emit('resolved')" />
 		<Wrapper
 			v-if="displayed"
 			:is-resolving-conflict="isResolvingConflict"
@@ -341,8 +345,11 @@ export default defineComponent({
 			return this.hasSyncCollission && !this.readOnly
 		},
 		hasSyncCollission() {
-			return Boolean(this.localChange) ||
-				(this.syncError && this.syncError.type === ERROR_TYPE.SAVE_COLLISSION)
+			return (
+				Boolean(this.localChange)
+				|| (this.syncError
+					&& this.syncError.type === ERROR_TYPE.SAVE_COLLISSION)
+			)
 		},
 		otherVersion() {
 			return this.localChange || this.syncError.data.outsideChange