Vue 3: Remove vue-async-computed extension (#8201)

* Remove vue-async-computed

* Update snapshots

* make loadPreviewTask restartable to cancel running tasks if needed

* Remove unnecessary timeout

packages/web-app-files/package.json

@@ -24,7 +24,6 @@
     "sanitize-html": "^2.7.0",
     "semver": "^7.3.8",
     "uuid": "^9.0.0",
-    "vue-async-computed": "^3.9.0",
     "vue-concurrency": "4.0.0",
     "vue-gettext": "2.1.12",
     "vue-router": "3.6.5",

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -5,12 +5,12 @@
         v-if="file.thumbnail"
         key="file-thumbnail"
         :style="{
-          'background-image': $asyncComputed.preview.updating ? 'none' : `url(${preview})`
+          'background-image': loadPreviewTask.isRunning ? 'none' : `url(${preview})`
         }"
         class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb"
         data-testid="preview"
       >
-        <oc-spinner v-if="$asyncComputed.preview.updating" />
+        <oc-spinner v-if="loadPreviewTask.isRunning" />
       </div>
       <div
         v-else
@@ -157,8 +157,8 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, inject, ref, unref } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import { computed, ComputedRef, defineComponent, inject, ref, unref, watch } from 'vue'
+import { mapGetters } from 'vuex'
 import { ImageDimension } from '../../../constants'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import upperFirst from 'lodash-es/upperFirst'
@@ -168,6 +168,7 @@ import { ShareTypes } from 'web-client/src/helpers/share'
 import {
   useAccessToken,
   useCapabilityFilesTags,
+  useClientService,
   usePublicLinkContext,
   useStore,
   useTranslations,
@@ -183,6 +184,7 @@ import { Resource } from 'web-client'
 import { buildShareSpaceResource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { useTask } from 'vue-concurrency'
 
 export default defineComponent({
   name: 'FileDetails',
@@ -199,6 +201,10 @@ export default defineComponent({
     } = useClipboard({ legacy: true, copiedDuring: 550 })
 
     const file = inject<ComputedRef<Resource>>('displayedItem')
+    const isPublicLinkContext = usePublicLinkContext({ store })
+    const accessToken = useAccessToken({ store })
+    const clientService = useClientService()
+    const preview = ref(undefined)
 
     const directLink = computed(() => {
       return `${store.getters.configuration.server}files/spaces/personal/home${encodePath(
@@ -224,24 +230,56 @@ export default defineComponent({
       })
     }
 
+    const loadData = async () => {
+      const calls = []
+      if (unref(file).type === 'file' && !unref(isPublicLinkContext)) {
+        calls.push(
+          store.dispatch('Files/loadVersions', {
+            client: unref(clientService).owncloudSdk,
+            fileId: unref(file).id
+          })
+        )
+      }
+      await Promise.all(calls.map((p) => p.catch((e) => e)))
+    }
+
+    const loadPreviewTask = useTask(function* (signal, file) {
+      preview.value = yield loadPreview({
+        resource: file,
+        isPublic: unref(isPublicLinkContext),
+        dimensions: ImageDimension.Preview,
+        server: store.getters.configuration.server,
+        userId: store.getters.user.id,
+        token: unref(accessToken)
+      })
+    }).restartable()
+
+    watch(
+      file,
+      () => {
+        loadData()
+        loadPreviewTask.perform(unref(file))
+      },
+      { immediate: true }
+    )
+
     return {
       copiedEos,
+      preview,
       copyEosPathToClipboard,
       copiedDirect,
       copyDirectLinkToClipboard,
       isClipboardCopySupported,
       isUserContext: useUserContext({ store }),
-      isPublicLinkContext: usePublicLinkContext({ store }),
-      accessToken: useAccessToken({ store }),
+      isPublicLinkContext,
+      accessToken,
       space: inject<ComputedRef<Resource>>('displayedSpace'),
       directLink,
       file,
-      hasTags: useCapabilityFilesTags()
+      hasTags: useCapabilityFilesTags(),
+      loadPreviewTask
     }
   },
-  data: () => ({
-    loading: false
-  }),
   computed: {
     ...mapGetters('runtime/spaces', ['spaces']),
     ...mapGetters('Files', ['versions', 'sharesTree', 'sharesTreeLoading', 'highlightedFile']),
@@ -446,35 +484,7 @@ export default defineComponent({
       return this.sharedItem?.file?.source
     }
   },
-  watch: {
-    file: {
-      handler: function () {
-        this.loadData()
-      },
-      immediate: true
-    }
-  },
-  asyncComputed: {
-    preview: {
-      async get() {
-        // TODO: this timeout resolves flickering of the preview because it's rendered multiple times. Needs a better solution.
-        await new Promise((resolve) => setTimeout(resolve, 500))
-        return loadPreview({
-          resource: this.file,
-          isPublic: this.isPublicLinkContext,
-          dimensions: ImageDimension.Preview,
-          server: this.configuration.server,
-          userId: this.user.id,
-          token: this.accessToken
-        })
-      },
-      lazy: true,
-      watch: ['file.id']
-    }
-  },
   methods: {
-    ...mapActions('Files', ['loadPreview', 'loadVersions']),
-
     getParentSharePath(childPath, shares) {
       let currentPath = childPath
       if (!currentPath) {
@@ -492,14 +502,6 @@ export default defineComponent({
     expandVersionsPanel() {
       eventBus.publish(SideBarEventTopics.setActivePanel, 'versions')
     },
-    async loadData() {
-      const calls = []
-      if (this.file.type === 'file' && !this.isPublicLinkContext) {
-        calls.push(this.loadVersions({ client: this.$client, fileId: this.file.id }))
-      }
-      await Promise.all(calls.map((p) => p.catch((e) => e)))
-      this.loading = false
-    },
     getTagLink(tag) {
       return createLocationCommon('files-common-search', {
         query: { term: `Tags:${tag}`, provider: 'files.sdk' }

packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/FileDetails.spec.ts.snap

@@ -3,8 +3,8 @@
 exports[`Details SideBar Panel displays a resource of type file on a private page updates when the shareTree updates 1`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <div class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb" style="background-image: url(null);">
-      <!--v-if-->
+    <div class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb" style="background-image: none;">
+      <oc-spinner-stub arialabel="" size="medium"></oc-spinner-stub>
     </div>
     <div class="oc-flex oc-flex-middle oc-my-m">
       <oc-status-indicators-stub indicators="[object Object]" resource="[object Object]" target=""></oc-status-indicators-stub>
@@ -56,8 +56,8 @@ exports[`Details SideBar Panel displays a resource of type file on a private pag
 exports[`Details SideBar Panel displays a resource of type file on a private page updates when the shareTree updates 2`] = `
 <div id="oc-file-details-sidebar">
   <div>
-    <div class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb" style="background-image: url(null);">
-      <!--v-if-->
+    <div class="details-preview oc-flex oc-flex-middle oc-flex-center oc-mb" style="background-image: none;">
+      <oc-spinner-stub arialabel="" size="medium"></oc-spinner-stub>
     </div>
     <div class="oc-flex oc-flex-middle oc-my-m">
       <oc-status-indicators-stub indicators="[object Object]" resource="[object Object]" target=""></oc-status-indicators-stub>

packages/web-app-search/package.json

@@ -9,7 +9,6 @@
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",
-    "vue-async-computed": "^3.9.0",
     "vue-gettext": "2.1.12",
     "web-app-files": "workspace:*",
     "web-pkg": "npm:@ownclouders/web-pkg"

packages/web-runtime/package.json

@@ -39,7 +39,6 @@
     "utf8": "^3.0.0",
     "uuid": "^9.0.0",
     "vue": "3.2.45",
-    "vue-async-computed": "^3.9.0",
     "vue-concurrency": "4.0.0",
     "vue-gettext": "2.1.12",
     "vue-inline-svg": "3.1.0",

packages/web-runtime/src/defaults/vue.js

@@ -5,7 +5,6 @@ import focusMixin from '../mixins/focusMixin'
 import lifecycleMixin from '../mixins/lifecycleMixin'
 import VueMeta from 'vue-meta'
 import PortalVue from 'portal-vue'
-import AsyncComputed from 'vue-async-computed'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 
@@ -16,7 +15,6 @@ Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })
 Vue.use(PortalVue)
-Vue.use(AsyncComputed)
 
 Vue.component('AvatarImage', Avatar)
 

packages/web-test-helpers/package.json

@@ -4,7 +4,6 @@
   "main": "src/index.ts",
   "peerDependencies": {
     "axios": "0.27.2",
-    "vue-async-computed": "^3.9.0",
     "vue-gettext": "2.1.12",
     "vue-router": "3.6.5",
     "vuex": "4.1.0"

packages/web-test-helpers/src/defaultPlugins.ts

@@ -1,20 +1,17 @@
 import DesignSystem from '@ownclouders/design-system'
 import GetTextPlugin from 'vue-gettext'
-import AsyncComputed from 'vue-async-computed'
 import Vue from 'vue'
 
 window.Vue = Vue
 
 export interface DefaultPluginsOptions {
   designSystem?: boolean
   gettext?: boolean
-  asyncComputed?: boolean
 }
 
 export const defaultPlugins = ({
   designSystem = true,
-  gettext = true,
-  asyncComputed = true
+  gettext = true
 }: DefaultPluginsOptions = {}) => {
   const plugins = []
 
@@ -48,9 +45,5 @@ export const defaultPlugins = ({
     })
   }
 
-  if (asyncComputed) {
-    plugins.push(AsyncComputed)
-  }
-
   return plugins
 }