fix(DocumentStatus): Refactor and migrate to NcNoteCard

Fixes: #4905

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

cypress/e2e/conflict.spec.js

@@ -54,7 +54,8 @@ variants.forEach(function({ fixture, mime }) {
 			cy.get('#viewer .modal-header button.header-close').click()
 			cy.get('#viewer').should('not.exist')
 			cy.openFile(fileName)
-			cy.get('.text-editor .document-status .icon-error')
+			cy.get('.text-editor .document-status')
+				.should('contain', 'Document has been changed outside of the editor.')
 			getWrapper()
 				.find('#read-only-editor')
 				.should('contain', 'Hello world')

cypress/e2e/share.spec.js

@@ -151,7 +151,7 @@ describe('Open test.md in viewer', function() {
 			cy.login(recipient)
 			cy.visit('/apps/files')
 			cy.openFile('test.md')
-			cy.getModal().find('.empty-content__name').should('contain', 'Failed to load file')
+			cy.getModal().find('.document-status').should('contain', 'This file cannot be displayed as download is disabled by the share')
 			cy.getModal().getContent().should('not.exist')
 		})
 	})

cypress/e2e/sync.spec.js

@@ -74,7 +74,7 @@ describe('Sync', () => {
 		}).as('sessionRequests')
 		cy.wait('@dead', { timeout: 30000 })
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('contain', 'File could not be loaded')
+			.should('contain', 'Document could not be loaded.')
 			.then(() => {
 				reconnect = true
 			})
@@ -83,7 +83,7 @@ describe('Sync', () => {
 			.as('syncAfterRecovery')
 		cy.wait('@syncAfterRecovery', { timeout: 30000 })
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('not.contain', 'File could not be loaded')
+			.should('not.contain', 'Document could not be loaded.')
 		// FIXME: There seems to be a bug where typed words maybe lost if not waiting for the new session
 		cy.wait('@syncAfterRecovery', { timeout: 10000 })
 		cy.getContent().type('* more content added after the lost connection{enter}')
@@ -109,12 +109,12 @@ describe('Sync', () => {
 
 		cy.wait('@sessionRequests', { timeout: 30000 })
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('contain', 'File could not be loaded')
+			.should('contain', 'Document could not be loaded.')
 
 		cy.wait('@syncAfterRecovery', { timeout: 60000 })
 
 		cy.get('#editor-container .document-status', { timeout: 30000 })
-			.should('not.contain', 'File could not be loaded')
+			.should('not.contain', 'Document could not be loaded.')
 		// FIXME: There seems to be a bug where typed words maybe lost if not waiting for the new session
 		cy.wait('@syncAfterRecovery', { timeout: 10000 })
 		cy.getContent().type('* more content added after the lost connection{enter}')

src/components/Editor/DocumentStatus.vue

@@ -22,27 +22,34 @@
 
 <template>
 	<div class="document-status">
-		<NcEmptyContent v-if="isLoadingError" :name="t('text', 'Failed to load file')" :description="syncError.data.data">
+		<NcNoteCard v-if="hasWarning" type="warning">
+			<p v-if="isLoadingError">
+				{{ syncError.data.data }}
+				<!-- Display reload button on PRECONDITION_FAILED response type -->
+				<a v-if="syncError.data.status === 412" class="button primary" @click="reload">{{ t('text', 'Reload') }}</a>
+			</p>
+			<p v-else-if="hasSyncCollission">
+				{{ t('text', 'Document has been changed outside of the editor. The changes cannot be applied') }}
+			</p>
+			<p v-else-if="hasConnectionIssue">
+				{{ t('text', 'Document could not be loaded. Please check your internet connection.') }}
+				<a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a>
+			</p>
+		</NcNoteCard>
+		<NcNoteCard v-else-if="idle" type="info">
+			<p>
+				{{ t('text', 'Document idle for {timeout} minutes, click to continue editing', { timeout: IDLE_TIMEOUT }) }}
+				<a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a>
+			</p>
+		</NcNoteCard>
+		<NcNoteCard v-if="lock" type="info">
 			<template #icon>
-				<AlertOctagonOutline />
+				<Lock :size="20" />
 			</template>
-		</NcEmptyContent>
-
-		<p v-else-if="idle" class="msg">
-			{{ t('text', 'Document idle for {timeout} minutes, click to continue editing', { timeout: IDLE_TIMEOUT }) }} <a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a>
-		</p>
-
-		<p v-else-if="hasSyncCollission" class="msg icon-error">
-			{{ t('text', 'The document has been changed outside of the editor. The changes cannot be applied.') }}
-		</p>
-
-		<p v-else-if="hasConnectionIssue" class="msg">
-			{{ t('text', 'File could not be loaded. Please check your internet connection.') }} <a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a>
-		</p>
-
-		<p v-if="lock" class="msg msg-locked">
-			<Lock /> {{ t('text', 'This file is opened read-only as it is currently locked by {user}.', { user: lock.displayName }) }}
-		</p>
+			<p>
+				{{ t('text', 'This file is opened read-only as it is currently locked by {user}.', { user: lock.displayName }) }}
+			</p>
+		</NcNoteCard>
 
 		<CollisionResolveDialog v-if="hasSyncCollission" :sync-error="syncError" />
 	</div>
@@ -51,19 +58,17 @@
 <script>
 
 import { ERROR_TYPE, IDLE_TIMEOUT } from './../../services/SyncService.js'
-import AlertOctagonOutline from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import Lock from 'vue-material-design-icons/Lock.vue'
-import { NcEmptyContent } from '@nextcloud/vue'
+import { NcNoteCard } from '@nextcloud/vue'
 import CollisionResolveDialog from '../CollisionResolveDialog.vue'
 
 export default {
 	name: 'DocumentStatus',
 
 	components: {
 		CollisionResolveDialog,
-		AlertOctagonOutline,
 		Lock,
-		NcEmptyContent,
+		NcNoteCard,
 	},
 
 	props: {
@@ -79,6 +84,7 @@ export default {
 			type: Object,
 			default: null,
 		},
+
 		hasConnectionIssue: {
 			type: Boolean,
 			require: true,
@@ -98,12 +104,18 @@ export default {
 		isLoadingError() {
 			return this.syncError && this.syncError.type === ERROR_TYPE.LOAD_ERROR
 		},
+		hasWarning() {
+			return this.syncError || this.hasConnectionIssue
+		},
 	},
 
 	methods: {
 		reconnect() {
 			this.$emit('reconnect')
 		},
+		reload() {
+			window.location.reload()
+		},
 	},
 
 }
@@ -112,28 +124,11 @@ export default {
 <style scoped lang="scss">
 	.document-status {
 		position: sticky;
-		top: 0;
-		z-index: 10000;
-		max-height: 50px;
+		top: 16px;
+		z-index: 100000;
+		// max-height: 50px;
+		max-width: var(--text-editor-max-width);
+		margin: auto;
 		background-color: var(--color-main-background);
-
-		.msg {
-			padding: 12px;
-			background-position: 8px center;
-			color: var(--color-text-maxcontrast);
-
-			&.icon-error {
-				padding-left: 30px;
-			}
-
-			.button {
-				margin-left: 8px;
-			}
-
-			&.msg-locked .lock-icon {
-				padding: 0 10px;
-				float: left;
-			}
-		}
 	}
 </style>