Change/streamline editor autosave

changelog/unreleased/change-configurable-extension-autosave

@@ -0,0 +1,8 @@
+Change: Configurable extension autosave
+
+We have added a global setting in the configuration to enable autosave (and the corresponding timeout) for bundled and external extensions,
+instead of having a per-extension configuration which was limited to external extensions.
+Handling of the provided autosave needs to be taken care of by the extension itself.
+
+https://github.com/owncloud/web/pull/8455
+https://github.com/owncloud/web/pull/8457

changelog/unreleased/enhancement-autosave-text-editor-changes

@@ -0,0 +1,5 @@
+Enhancement: Autosave content changes in text editor
+
+We have added the configurable functionality to autosave content changes in text editor.
+
+https://github.com/owncloud/web/pull/8455

dev/docker/ocis.web.config.json

@@ -41,7 +41,6 @@
       "path": "web-app-draw-io",
       "config": {
         "url": "https://embed.diagrams.net",
-        "autosave": false,
         "theme": "minimal"
       }
     }

docs/getting-started.md

@@ -65,6 +65,8 @@ hovers the row with his mouse. Defaults to `false`.
 - `option.routing` This accepts an object with the following fields to customize the routing behaviour:
   - `options.routing.idBased` Enable or disable fileIds being added to the URL. Defaults to `true` because otherwise e.g. spaces with name clashes can't be resolved correctly. Only disable this if you can guarantee server side that spaces of the same namespace can't have name clashes.   
 - `options.upload.xhr.timeout` Specifies the timeout for XHR uploads in milliseconds.
+- `options.editor.autosaveEnabled` Specifies if the autosave for the editor apps is enabled.
+- `options.editor.autosaveInterval` Specifies the time interval for the autosave of editor apps in milliseconds.
 
 ### Sentry
 

packages/web-app-draw-io/src/App.vue

@@ -14,21 +14,25 @@
   </main>
 </template>
 <script lang="ts">
-import { mapActions } from 'vuex'
-import qs from 'qs'
 import { DateTime } from 'luxon'
-import { DavPermission, DavProperty } from 'web-client/src/webdav/constants'
-import { useAppDefaults } from 'web-pkg/src/composables'
-import { defineComponent } from 'vue'
 import { basename } from 'path'
+import qs from 'qs'
+import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
+import { DavPermission, DavProperty } from 'web-client/src/webdav/constants'
+import { useAppDefaults, useStore } from 'web-pkg/src/composables'
 
 export default defineComponent({
   name: 'DrawIoEditor',
   setup() {
+    const store = useStore()
+    const isAutoSaveEnabled = store.getters.configuration.options.editor.autosaveEnabled
+
     return {
       ...useAppDefaults({
         applicationId: 'draw-io'
-      })
+      }),
+      isAutoSaveEnabled
     }
   },
   data: () => ({
@@ -40,12 +44,8 @@ export default defineComponent({
   }),
   computed: {
     config() {
-      const {
-        url = 'https://embed.diagrams.net',
-        theme = 'minimal',
-        autosave = false
-      } = this.applicationConfig
-      return { url, theme, autosave: autosave ? 1 : 0 }
+      const { url = 'https://embed.diagrams.net', theme = 'minimal' } = this.applicationConfig
+      return { url, theme }
     },
     urlHost() {
       const url = new URL(this.config.url)
@@ -88,7 +88,9 @@ export default defineComponent({
             this.fileExtension === 'vsdx' ? this.importVisio() : this.load()
             break
           case 'autosave':
-            this.save(payload, true)
+            if (this.isAutoSaveEnabled) {
+              this.save(payload, true)
+            }
             break
           case 'save':
             this.save(payload)
@@ -148,7 +150,7 @@ export default defineComponent({
           JSON.stringify({
             action: 'load',
             xml: response.body,
-            autosave: this.config.autosave
+            autosave: this.isAutoSaveEnabled
           }),
           this.urlHost
         )
@@ -189,7 +191,7 @@ export default defineComponent({
               JSON.stringify({
                 action: 'load',
                 xml: reader.result,
-                autosave: this.config.autosave
+                autosave: this.isAutoSaveEnabled
               }),
               this.urlHost
             )

packages/web-app-text-editor/src/App.vue

@@ -102,6 +102,7 @@ export default defineComponent({
     const resource: Ref<Resource> = ref()
     const store = useStore()
     const { $gettext, interpolate: $gettextInterpolate } = useGettext()
+    let autosaveIntervalId = null
 
     const errorPopup = (error) => {
       store.dispatch('showMessage', {
@@ -111,6 +112,12 @@ export default defineComponent({
       })
     }
 
+    const autosavePopup = () => {
+      store.dispatch('showMessage', {
+        title: $gettext('File autosaved')
+      })
+    }
+
     const loadFileTask = useTask(function* () {
       resource.value = yield getFileInfo(currentFileContext, {
         davProperties: [DavProperty.FileId, DavProperty.Permissions, DavProperty.Name]
@@ -194,7 +201,7 @@ export default defineComponent({
     })
 
     const isLoading = computed(() => {
-      return loadFileTask.isRunning || saveFileTask.isRunning
+      return loadFileTask.isRunning
     })
 
     const showPreview = computed(() => {
@@ -215,11 +222,21 @@ export default defineComponent({
       document.addEventListener('keydown', handleSKey, false)
       // Ensure reload is not possible if there are changes
       window.addEventListener('beforeunload', handleUnload)
+
+      const editorOptions = store.getters.configuration.options.editor
+      if (editorOptions.autosaveEnabled) {
+        autosaveIntervalId = setInterval(() => {
+          if (isDirty.value) {
+            save().then((r) => autosavePopup())
+          }
+        }, editorOptions.autosaveInterval)
+      }
     })
 
     onBeforeUnmount(() => {
       window.removeEventListener('beforeunload', handleUnload)
       document.removeEventListener('keydown', handleSKey, false)
+      clearInterval(autosaveIntervalId)
     })
 
     const save = async function () {

packages/web-app-text-editor/tests/unit/app.spec.ts

@@ -1,8 +1,7 @@
-import App from '../../src/App.vue'
-import { useAppDefaultsMock } from 'web-test-helpers/src/mocks/useAppDefaultsMock'
-import { FileContext, useAppDefaults } from 'web-pkg/src/composables/appDefaults'
 import { mock } from 'jest-mock-extended'
 import { ref } from 'vue'
+import { Resource } from 'web-client'
+import { FileContext, useAppDefaults } from 'web-pkg/src/composables/appDefaults'
 import {
   createStore,
   defaultPlugins,
@@ -11,7 +10,8 @@ import {
   defaultComponentMocks,
   defaultStubs
 } from 'web-test-helpers'
-import { Resource } from 'web-client'
+import { useAppDefaultsMock } from 'web-test-helpers/src/mocks/useAppDefaultsMock'
+import App from '../../src/App.vue'
 
 jest.mock('web-pkg/src/composables/appDefaults')
 

packages/web-pkg/src/composables/appDefaults/useAppMeta.ts

@@ -9,7 +9,6 @@ interface AppMetaOptions {
 
 export interface AppMetaObject {
   config: AppConfigObject
-  autosave: boolean
   theme: string
   url: string
   icon: string

packages/web-runtime/src/store/config.ts

@@ -37,6 +37,10 @@ const state = {
   options: {
     contextHelpers: true,
     defaultExtension: 'files',
+    editor: {
+      autosaveEnabled: false,
+      autosaveInterval: 120000
+    },
     // ugly hack to still have notifications but don't have
     // them blocking UI elements in acceptance/E2E tests
     topCenterNotifications: false,

packages/web-runtime/tests/unit/helpers/config.spec.ts

@@ -20,7 +20,6 @@ const validConfig = `{
       "path": "web-app-draw-io",
       "config": {
         "url": "https://embed.diagrams.net",
-        "autosave": false,
         "theme": "minimal"
       }
     }

packages/web-test-helpers/src/mocks/store/defaultStoreMockOptions.ts

@@ -11,9 +11,15 @@ export const defaultStoreMockOptions = {
     quota: jest.fn(() => ({})),
     capabilities: jest.fn().mockImplementation(() => ({})),
     user: jest.fn().mockImplementation(() => ({})),
-    configuration: jest
-      .fn()
-      .mockImplementation(() => ({ currentTheme: { general: { slogan: '' } } }))
+    configuration: jest.fn().mockImplementation(() => ({
+      currentTheme: { general: { slogan: '' } },
+      options: {
+        editor: {
+          autosaveEnabled: false,
+          autosaveInterval: 120000
+        }
+      }
+    }))
   },
   modules: {
     ...filesModuleMockOptions,