Skip to content

Commit

Permalink
fix(DocumentStatus): Refactor and migrate to NcNoteCard
Browse files Browse the repository at this point in the history 
Fixes: #4905

Signed-off-by: Jonas <jonas@freesources.org>
  • Loading branch information
@mejo-
mejo- committed Mar 27, 2024
1 parent ba06469 commit babf54e
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 50 deletions.
3 changes: 2 additions & 1 deletion cypress/e2e/conflict.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
.get('#read-only-editor')
.should('contain', 'Hello world')
Expand Down
8 changes: 4 additions & 4 deletions cypress/e2e/sync.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,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
})
Expand All @@ -86,7 +86,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}')
Expand All @@ -112,12 +112,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}')
Expand Down
85 changes: 40 additions & 45 deletions src/components/Editor/DocumentStatus.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,34 @@

<template>
<div class="document-status">
<NcEmptyContent v-if="isLoadingError" :title="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>
Expand All @@ -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: {
Expand All @@ -79,6 +84,7 @@ export default {
type: Object,
default: null,
},

hasConnectionIssue: {
type: Boolean,
require: true,
Expand All @@ -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()
},
},

}
Expand All @@ -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>

0 comments on commit babf54e

Please sign in to comment.