From e9ab07b75f6fdd41c1316095a963d707c5793315 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 10:42:26 +0100
Subject: [PATCH 01/39] Init trash overview

---
 packages/web-app-files/src/index.ts           |  7 +++++-
 packages/web-app-files/src/router/router.ts   |  3 +++
 packages/web-app-files/src/router/trash.ts    | 22 +++++++++++++++----
 .../src/views/trash/Overview.vue              |  1 +
 4 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 packages/web-app-files/src/views/trash/Overview.vue

diff --git a/packages/web-app-files/src/index.ts b/packages/web-app-files/src/index.ts
index 7d2ecf31f3c..c769dee2bb7 100644
--- a/packages/web-app-files/src/index.ts
+++ b/packages/web-app-files/src/index.ts
@@ -6,6 +6,7 @@ import SharedWithOthers from './views/shares/SharedWithOthers.vue'
 import SharedViaLink from './views/shares/SharedViaLink.vue'
 import SpaceDriveResolver from './views/spaces/DriveResolver.vue'
 import SpaceProjects from './views/spaces/Projects.vue'
+import TrashOverview from './views/trash/Overview.vue'
 import translations from '../l10n/translations.json'
 import quickActions from './quickActions'
 import store from './store'
@@ -78,7 +79,8 @@ const navItems = [
     name: $gettext('Deleted files'),
     icon: 'delete-bin-5',
     route: {
-      path: `/${appInfo.id}/trash`
+      path: `/${appInfo.id}/trash`,
+      activeFor: [{ path: `/${appInfo.id}/trash/` }],
     },
     enabled(capabilities) {
       return capabilities.dav && capabilities.dav.trashbin === '1.0'
@@ -102,6 +104,9 @@ export default {
     Spaces: {
       DriveResolver: SpaceDriveResolver,
       Projects: SpaceProjects
+    },
+    Trash: {
+      Overview: TrashOverview
     }
   }),
   navItems,
diff --git a/packages/web-app-files/src/router/router.ts b/packages/web-app-files/src/router/router.ts
index aa76c51b2d2..d873be9a035 100644
--- a/packages/web-app-files/src/router/router.ts
+++ b/packages/web-app-files/src/router/router.ts
@@ -23,4 +23,7 @@ export interface RouteComponents {
     DriveResolver: Component
     Projects: Component
   }
+  Trash: {
+    Overview: Component
+  }
 }
diff --git a/packages/web-app-files/src/router/trash.ts b/packages/web-app-files/src/router/trash.ts
index 0103a44fbd4..a76ad2811db 100644
--- a/packages/web-app-files/src/router/trash.ts
+++ b/packages/web-app-files/src/router/trash.ts
@@ -1,24 +1,38 @@
 import { RouteComponents } from './router'
 import { RouteLocationNamedRaw, RouteRecordRaw } from 'vue-router'
-import { createLocation, isLocationActiveDirector } from './utils'
+import { $gettext, createLocation, isLocationActiveDirector } from './utils'
 
-type trashTypes = 'files-trash-generic'
+type trashTypes = 'files-trash-generic' | 'files-trash-overview'
 
 export const createLocationTrash = (name: trashTypes, location = {}): RouteLocationNamedRaw =>
   createLocation(name, location)
 
 export const locationTrashGeneric = createLocationTrash('files-trash-generic')
 
-export const isLocationTrashActive = isLocationActiveDirector<trashTypes>(locationTrashGeneric)
+export const locationTrashOverview = createLocationTrash('files-trash-overview')
+
+export const isLocationTrashActive = isLocationActiveDirector<trashTypes>(
+  locationTrashGeneric,
+  locationTrashOverview
+)
 
 export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
   {
     path: '/trash',
     component: components.App,
     children: [
+      {
+        path: '',
+        name: locationTrashOverview.name,
+        component: components.Trash.Overview,
+        meta: {
+          authContext: 'user',
+          title: $gettext('Trash overview')
+        }
+      },
       {
         name: locationTrashGeneric.name,
-        path: ':driveAliasAndItem(.*)?',
+        path: 'trash/:driveAliasAndItem(.*)?',
         component: components.Spaces.DriveResolver,
         meta: {
           authContext: 'user',
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
new file mode 100644
index 00000000000..55b057784e7
--- /dev/null
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -0,0 +1 @@
+<template>Henlo</template>

From d07d18af3fb9d0e027fcd3b9ae083198ff979617 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 12:09:23 +0100
Subject: [PATCH 02/39] Enhancements

---
 .../src/views/spaces/GenericTrash.vue         |   2 +-
 .../src/views/trash/Overview.vue              | 203 +++++++++++++++++-
 2 files changed, 203 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index fb78f6efb4d..c557d123818 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -176,7 +176,7 @@ export default defineComponent({
       return [
         {
           text: this.$gettext('Deleted files'),
-          to: createLocationTrash('files-trash-generic') // FIXME: UX of clicking `Deleted files` and being redirected to personal trash is wrong.
+          to: createLocationTrash('files-trash-overview') // FIXME: UX of clicking `Deleted files` and being redirected to personal trash is wrong.
         },
         {
           allowContextActions,
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 55b057784e7..971d36acf8a 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -1 +1,202 @@
-<template>Henlo</template>
+<template>
+  <div>
+    <oc-text-input
+      id="spaces-filter"
+      v-model="filterTerm"
+      class="oc-ml-m oc-my-s"
+      :label="$gettext('Search')"
+      autocomplete="off"
+    />
+    <oc-table
+      ref="tableRef"
+      class="spaces-table"
+      :sort-by="sortBy"
+      :sort-dir="sortDir"
+      :fields="fields"
+      :data="orderedSpaces"
+      :sticky="true"
+      :hover="true"
+      @sort="handleSort"
+    >
+      <template #icon="{ item }">
+        <oc-icon v-if="item.driveType === 'personal'" name="folder" />
+        <oc-icon v-else name="layout-grid" />
+      </template>
+      <template #name="{ item }">
+        <oc-button
+          type="router-link"
+          appearance="raw"
+          :to="getTrashLink(item)"
+          v-text="getSpaceName(item)"
+        />
+      </template>
+      <template #footer>
+        <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+          <p class="oc-text-muted">{{ footerTextTotal }}</p>
+          <p v-if="filterTerm" class="oc-text-muted">{{ footerTextFilter }}</p>
+        </div>
+      </template>
+    </oc-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, nextTick, onMounted, ref, unref, watch } from 'vue'
+import { buildSpace } from 'web-client/src/helpers'
+import Mark from 'mark.js'
+import Fuse from 'fuse.js'
+import { useGettext } from 'vue3-gettext'
+import { useTask } from 'vue-concurrency'
+import { configurationManager, useGraphClient } from 'web-pkg'
+import { createLocationTrash } from 'web-app-files/src/router'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+
+export default defineComponent({
+  name: 'TrashOverview',
+  methods: { createLocationTrash },
+  setup: function (props) {
+    const { $gettext } = useGettext()
+    const sortBy = ref('name')
+    const sortDir = ref('asc')
+    const filterTerm = ref('')
+    const markInstance = ref(undefined)
+    const tableRef = ref(undefined)
+    const spaces = ref([])
+    const { graphClient } = useGraphClient()
+
+    const loadResourcesTask = useTask(function* (signal) {
+      const {
+        data: { value: drivesResponse }
+      } = yield unref(graphClient).drives.listMyDrives()
+      const drives = drivesResponse
+        .map((space) => buildSpace({ ...space, serverUrl: configurationManager.serverUrl }))
+        .filter((space) => space.driveType === 'project' || space.driveType === 'personal')
+      spaces.value = drives
+    })
+
+    const footerTextTotal = computed(() => {
+      return $gettext('%{spaceCount} trashes in total', {
+        spaceCount: unref(spaces).length.toString()
+      })
+    })
+    const footerTextFilter = computed(() => {
+      return $gettext('%{spaceCount} matching trashes', {
+        spaceCount: unref(orderedSpaces).length
+      })
+    })
+
+    const orderBy = (list, prop, desc) => {
+      return [...list].sort((s1, s2) => {
+        let a, b
+
+        if (prop === 'name') {
+          if (s1.driveType === 'personal') {
+            return s1
+          }
+          if (s2.driveType === 'personal') {
+            return s2
+          }
+        }
+
+        a = s1[prop]
+        b = s2[prop]
+
+        return desc ? b.localeCompare(a) : a.localeCompare(b)
+      })
+    }
+    const orderedSpaces = computed(() =>
+      orderBy(filter(unref(spaces), unref(filterTerm)), unref(sortBy), unref(sortDir) === 'desc')
+    )
+    const handleSort = (event) => {
+      sortBy.value = event.sortBy
+      sortDir.value = event.sortDir
+    }
+    const filter = (spaces, filterTerm) => {
+      if (!(filterTerm || '').trim()) {
+        return spaces
+      }
+      const searchEngine = new Fuse(spaces, {
+        includeScore: true,
+        useExtendedSearch: true,
+        threshold: 0.3,
+        keys: ['name']
+      })
+
+      return searchEngine.search(filterTerm).map((r) => r.item)
+    }
+
+    const fields = computed(() => [
+      {
+        name: 'icon',
+        title: '',
+        type: 'slot',
+        width: 'shrink'
+      },
+      {
+        name: 'name',
+        title: $gettext('Name'),
+        type: 'slot',
+        sortable: true
+      }
+    ])
+
+    const getSpaceName = (space) => {
+      return space.driveType === 'personal' ? $gettext('Personal') : space.name
+    }
+
+    const getTrashLink = (space) => {
+      return createLocationTrash('files-trash-generic', {
+        ...createFileRouteOptions(space, { fileId: space.fileId })
+      })
+    }
+
+    onMounted(async () => {
+      await loadResourcesTask.perform()
+
+      nextTick(() => {
+        markInstance.value = new Mark(unref(tableRef).$el)
+        orderBy(spaces, 'name', 'asc')
+      })
+    })
+
+    watch(filterTerm, () => {
+      const instance = unref(markInstance)
+      if (!instance) {
+        return
+      }
+      instance.unmark()
+      instance.mark(unref(filterTerm), {
+        element: 'span',
+        className: 'highlight-mark',
+        exclude: ['th *', 'tfoot *']
+      })
+    })
+
+    return {
+      sortBy,
+      sortDir,
+      filterTerm,
+      footerTextTotal,
+      footerTextFilter,
+      fields,
+      tableRef,
+      spaces,
+      filter,
+      handleSort,
+      orderedSpaces,
+      getSpaceName,
+      getTrashLink
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+#spaces-filter {
+  width: 16rem;
+}
+
+.highlight-mark {
+  font-weight: 600;
+}
+</style>

From e1109d2e466293b802a44e53897c8412c1db9c6d Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 12:40:38 +0100
Subject: [PATCH 03/39] Enhancements

---
 .../src/components/AppBar/AppBar.vue          |  6 +-
 .../src/views/trash/Overview.vue              | 99 +++++++++++--------
 2 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 27ed98d99e7..e514ace69c8 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -4,7 +4,7 @@
     <div class="files-topbar oc-py-s">
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
       <div
-        class="oc-flex"
+        class="oc-flex files-app-bar-controls"
         :class="{
           'oc-flex-between': breadcrumbs.length || hasSharesNavigation,
           'oc-flex-right': !breadcrumbs.length && !hasSharesNavigation
@@ -211,6 +211,10 @@ export default defineComponent({
   padding: 0 var(--oc-space-medium);
   top: 0;
 
+  .files-app-bar-controls {
+    height: 52px;
+  }
+
   .files-app-bar-actions {
     align-items: center;
     display: flex;
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 971d36acf8a..314416c2439 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -1,42 +1,54 @@
 <template>
-  <div>
-    <oc-text-input
-      id="spaces-filter"
-      v-model="filterTerm"
-      class="oc-ml-m oc-my-s"
-      :label="$gettext('Search')"
-      autocomplete="off"
-    />
-    <oc-table
-      ref="tableRef"
-      class="spaces-table"
-      :sort-by="sortBy"
-      :sort-dir="sortDir"
-      :fields="fields"
-      :data="orderedSpaces"
-      :sticky="true"
-      :hover="true"
-      @sort="handleSort"
-    >
-      <template #icon="{ item }">
-        <oc-icon v-if="item.driveType === 'personal'" name="folder" />
-        <oc-icon v-else name="layout-grid" />
-      </template>
-      <template #name="{ item }">
-        <oc-button
-          type="router-link"
-          appearance="raw"
-          :to="getTrashLink(item)"
-          v-text="getSpaceName(item)"
+  <div class="oc-flex">
+    <files-view-wrapper>
+      <app-bar
+        :breadcrumbs="breadcrumbs"
+        :has-sidebar-toggle="false"
+        :has-view-options="false"
+        :has-hidden-files="false"
+        :has-file-extensions="false"
+        :has-pagination="false"
+      />
+      <div>
+        <oc-text-input
+          id="spaces-filter"
+          v-model="filterTerm"
+          class="oc-ml-m oc-my-s"
+          :label="$gettext('Search')"
+          autocomplete="off"
         />
-      </template>
-      <template #footer>
-        <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
-          <p class="oc-text-muted">{{ footerTextTotal }}</p>
-          <p v-if="filterTerm" class="oc-text-muted">{{ footerTextFilter }}</p>
-        </div>
-      </template>
-    </oc-table>
+        <oc-table
+          ref="tableRef"
+          class="spaces-table"
+          :sort-by="sortBy"
+          :sort-dir="sortDir"
+          :fields="fields"
+          :data="orderedSpaces"
+          :sticky="true"
+          :hover="true"
+          @sort="handleSort"
+        >
+          <template #icon="{ item }">
+            <oc-icon v-if="item.driveType === 'personal'" name="folder" />
+            <oc-icon v-else name="layout-grid" />
+          </template>
+          <template #name="{ item }">
+            <oc-button
+              type="router-link"
+              appearance="raw"
+              :to="getTrashLink(item)"
+              v-text="getSpaceName(item)"
+            />
+          </template>
+          <template #footer>
+            <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+              <p class="oc-text-muted">{{ footerTextTotal }}</p>
+              <p v-if="filterTerm" class="oc-text-muted">{{ footerTextFilter }}</p>
+            </div>
+          </template>
+        </oc-table>
+      </div>
+    </files-view-wrapper>
   </div>
 </template>
 
@@ -47,12 +59,15 @@ import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
-import { configurationManager, useGraphClient } from 'web-pkg'
+import { configurationManager, eventBus, useGraphClient } from 'web-pkg'
 import { createLocationTrash } from 'web-app-files/src/router'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'
+import FilesViewWrapper from 'web-app-files/src/components/FilesViewWrapper.vue'
 
 export default defineComponent({
   name: 'TrashOverview',
+  components: { FilesViewWrapper, AppBar },
   methods: { createLocationTrash },
   setup: function (props) {
     const { $gettext } = useGettext()
@@ -71,7 +86,7 @@ export default defineComponent({
       const drives = drivesResponse
         .map((space) => buildSpace({ ...space, serverUrl: configurationManager.serverUrl }))
         .filter((space) => space.driveType === 'project' || space.driveType === 'personal')
-      spaces.value = drives
+      spaces.value = orderBy(drives, 'name', 'asc')
     })
 
     const footerTextTotal = computed(() => {
@@ -85,6 +100,10 @@ export default defineComponent({
       })
     })
 
+    const breadcrumbs = computed(() => [
+      { text: $gettext('Deleted files'), onClick: () => loadResourcesTask.perform() }
+    ])
+
     const orderBy = (list, prop, desc) => {
       return [...list].sort((s1, s2) => {
         let a, b
@@ -155,7 +174,6 @@ export default defineComponent({
 
       nextTick(() => {
         markInstance.value = new Mark(unref(tableRef).$el)
-        orderBy(spaces, 'name', 'asc')
       })
     })
 
@@ -184,6 +202,7 @@ export default defineComponent({
       filter,
       handleSort,
       orderedSpaces,
+      breadcrumbs,
       getSpaceName,
       getTrashLink
     }

From 45dc6c56d7e35c43cb9561947e540fb369478960 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 12:45:12 +0100
Subject: [PATCH 04/39] Enhancements

---
 packages/web-app-files/src/views/trash/Overview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 314416c2439..f6b8aa08bd0 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -137,7 +137,7 @@ export default defineComponent({
       const searchEngine = new Fuse(spaces, {
         includeScore: true,
         useExtendedSearch: true,
-        threshold: 0.3,
+        threshold: 0.1,
         keys: ['name']
       })
 

From 4b41a8dd04719a9950ae5dc0aefc7239c5e6f911 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 13:00:30 +0100
Subject: [PATCH 05/39] Enhancements

---
 packages/web-app-files/src/index.ts                 | 2 +-
 packages/web-app-files/src/views/trash/Overview.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/index.ts b/packages/web-app-files/src/index.ts
index c769dee2bb7..5d86728d9f4 100644
--- a/packages/web-app-files/src/index.ts
+++ b/packages/web-app-files/src/index.ts
@@ -80,7 +80,7 @@ const navItems = [
     icon: 'delete-bin-5',
     route: {
       path: `/${appInfo.id}/trash`,
-      activeFor: [{ path: `/${appInfo.id}/trash/` }],
+      activeFor: [{ path: `/${appInfo.id}/trash/` }]
     },
     enabled(capabilities) {
       return capabilities.dav && capabilities.dav.trashbin === '1.0'
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index f6b8aa08bd0..e9fcb02d4da 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -59,7 +59,7 @@ import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
-import { configurationManager, eventBus, useGraphClient } from 'web-pkg'
+import { configurationManager, useGraphClient } from 'web-pkg'
 import { createLocationTrash } from 'web-app-files/src/router'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'

From cdccc33b135f57be24b3fff2b2908b2eaae9cb90 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 13:26:02 +0100
Subject: [PATCH 06/39] Update snapshots

---
 .../components/AppBar/__snapshots__/AppBar.spec.ts.snap     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index 4c0e9b1079d..becba4b001f 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
   <oc-hidden-announcer-stub announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
-    <div class="oc-flex oc-flex-right">
+    <div class="oc-flex files-app-bar-controls oc-flex-right">
       <!--v-if-->
       <!--v-if-->
       <div class="oc-flex">
@@ -27,7 +27,7 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
   <oc-hidden-announcer-stub announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
-    <div class="oc-flex oc-flex-right">
+    <div class="oc-flex files-app-bar-controls oc-flex-right">
       <!--v-if-->
       <!--v-if-->
       <div class="oc-flex">
@@ -50,7 +50,7 @@ exports[`AppBar component renders if given, with content in the content slot 1`]
   <oc-hidden-announcer-stub announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
-    <div class="oc-flex oc-flex-right">
+    <div class="oc-flex files-app-bar-controls oc-flex-right">
       <!--v-if-->
       <!--v-if-->
       <div class="oc-flex">

From 9abe4a2cf5820697f4b6566cd7b0c73c189777c3 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 13:34:56 +0100
Subject: [PATCH 07/39] Purge navigate space items

---
 .../components/FilesList/ContextActions.vue   |  1 -
 .../FilesList/ContextActions.spec.ts          |  1 -
 .../web-pkg/src/mixins/spaces/navigate.ts     | 43 -----------
 .../tests/unit/mixins/spaces/navigate.spec.ts | 76 -------------------
 4 files changed, 121 deletions(-)
 delete mode 100644 packages/web-pkg/src/mixins/spaces/navigate.ts
 delete mode 100644 packages/web-pkg/tests/unit/mixins/spaces/navigate.spec.ts

diff --git a/packages/web-app-files/src/components/FilesList/ContextActions.vue b/packages/web-app-files/src/components/FilesList/ContextActions.vue
index efa4ef34f90..59720b6ae72 100644
--- a/packages/web-app-files/src/components/FilesList/ContextActions.vue
+++ b/packages/web-app-files/src/components/FilesList/ContextActions.vue
@@ -142,7 +142,6 @@ export default {
         ...this.$_declineShare_items,
         ...this.$_setSpaceImage_items,
         ...this.$_setSpaceReadme_items,
-        ...this.$_navigate_space_items
       ].filter((item) => item.isEnabled(this.filterParams))
     },
 
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ContextActions.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ContextActions.spec.ts
index f49be559d7c..e6bb41dcdd7 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ContextActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ContextActions.spec.ts
@@ -31,7 +31,6 @@ const mixins = [
   '$_declineShare_items',
   '$_setSpaceImage_items',
   '$_setSpaceReadme_items',
-  '$_navigate_space_items',
   '$_navigate_items',
   '$_favorite_items',
   '$_showDetails_items',
diff --git a/packages/web-pkg/src/mixins/spaces/navigate.ts b/packages/web-pkg/src/mixins/spaces/navigate.ts
deleted file mode 100644
index 49c7b238827..00000000000
--- a/packages/web-pkg/src/mixins/spaces/navigate.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { unref } from 'vue'
-
-export default {
-  computed: {
-    $_navigate_space_items() {
-      return [
-        {
-          name: 'navigate',
-          icon: 'layout-grid',
-          label: () => {
-            return this.$gettext('Navigate to space')
-          },
-          handler: this.$_navigate_space_trigger,
-          isEnabled: ({ resources }) => {
-            if (resources.length) {
-              return false
-            }
-            if (unref(this.$router.currentRoute).name !== 'files-trash-generic') {
-              return false
-            }
-            return this.space?.driveType !== 'personal'
-          },
-          componentType: 'button',
-          class: 'oc-files-actions-navigate-trigger'
-        }
-      ]
-    }
-  },
-  methods: {
-    $_navigate_space_trigger() {
-      const driveAlias = this.space?.driveAlias
-      if (!driveAlias) {
-        return
-      }
-      return this.$router.push({
-        name: 'files-spaces-generic',
-        params: {
-          driveAliasAndItem: driveAlias
-        }
-      })
-    }
-  }
-}
diff --git a/packages/web-pkg/tests/unit/mixins/spaces/navigate.spec.ts b/packages/web-pkg/tests/unit/mixins/spaces/navigate.spec.ts
deleted file mode 100644
index e873bf3d162..00000000000
--- a/packages/web-pkg/tests/unit/mixins/spaces/navigate.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { mock } from 'jest-mock-extended'
-import Navigate from 'web-pkg/src/mixins/spaces/navigate'
-import {
-  createStore,
-  defaultComponentMocks,
-  defaultPlugins,
-  mount,
-  defaultStoreMockOptions,
-  RouteLocation
-} from 'web-test-helpers'
-
-const Component = {
-  template: '<div></div>',
-  mixins: [Navigate]
-}
-
-describe('navigate', () => {
-  afterEach(() => jest.clearAllMocks())
-
-  describe('isEnabled property', () => {
-    it('should be true when no resource given', () => {
-      const { wrapper } = getWrapper()
-      expect(wrapper.vm.$_navigate_space_items[0].isEnabled({ resources: [] })).toBe(true)
-    })
-    it('should be false when resource is given', () => {
-      const { wrapper } = getWrapper()
-      expect(wrapper.vm.$_navigate_space_items[0].isEnabled({ resources: [{}] })).toBe(false)
-    })
-    it('should be false when location is invalid', () => {
-      const { wrapper } = getWrapper({ invalidLocation: true })
-      expect(wrapper.vm.$_navigate_space_items[0].isEnabled({ resources: [] })).toBe(false)
-    })
-  })
-
-  describe('method "$_navigate_space_trigger"', () => {
-    it('should trigger route change', async () => {
-      const { wrapper } = getWrapper()
-      await wrapper.vm.$_navigate_space_trigger()
-
-      expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
-        name: 'files-spaces-generic',
-        params: {
-          driveAliasAndItem: 'project/mars'
-        }
-      })
-    })
-  })
-})
-
-function getWrapper({ invalidLocation = false } = {}) {
-  const currentRoute = mock<RouteLocation>({ name: '', params: { driveAliasAndItem: '' } })
-  if (invalidLocation) {
-    currentRoute.name = 'files-spaces-generic'
-  } else {
-    currentRoute.name = 'files-trash-generic'
-    currentRoute.params.driveAliasAndItem = 'project/mars'
-  }
-  const mocks = {
-    ...defaultComponentMocks({ currentRoute }),
-    space: {
-      driveType: 'project',
-      driveAlias: 'project/mars',
-      getDriveAliasAndItem: () => 'project/mars'
-    }
-  }
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
-  return {
-    wrapper: mount(Component, {
-      global: {
-        plugins: [...defaultPlugins(), store],
-        mocks
-      }
-    })
-  }
-}

From a80d95b906a0dbdad97be3943867a3dadf7aebb4 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 13:38:18 +0100
Subject: [PATCH 08/39] Purge navigate space items

---
 .../web-app-files/src/components/FilesList/ContextActions.vue | 4 +---
 packages/web-app-files/src/views/spaces/GenericTrash.vue      | 3 ---
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ContextActions.vue b/packages/web-app-files/src/components/FilesList/ContextActions.vue
index 59720b6ae72..222fd2e5cbc 100644
--- a/packages/web-app-files/src/components/FilesList/ContextActions.vue
+++ b/packages/web-app-files/src/components/FilesList/ContextActions.vue
@@ -14,7 +14,6 @@ import ShowDetails from '../../mixins/actions/showDetails'
 import ShowShares from '../../mixins/actions/showShares'
 import SetSpaceImage from '../../mixins/spaces/actions/setImage'
 import SetSpaceReadme from 'web-pkg/src/mixins/spaces/setReadme'
-import SpaceNavigate from 'web-pkg/src/mixins/spaces/navigate'
 import { PropType } from 'vue'
 import { Resource } from 'web-client'
 import { SpaceResource } from 'web-client/src/helpers'
@@ -31,8 +30,7 @@ export default {
     ShowDetails,
     ShowShares,
     SetSpaceImage,
-    SetSpaceReadme,
-    SpaceNavigate
+    SetSpaceReadme
   ],
 
   props: {
diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index c557d123818..0244b06a9bb 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -167,11 +167,9 @@ export default defineComponent({
     },
 
     breadcrumbs() {
-      let allowContextActions = true
       let currentNodeName = this.space?.name
       if (this.space.driveType === 'personal') {
         currentNodeName = this.hasShareJail ? this.$gettext('Personal') : this.$gettext('All files')
-        allowContextActions = false
       }
       return [
         {
@@ -179,7 +177,6 @@ export default defineComponent({
           to: createLocationTrash('files-trash-overview') // FIXME: UX of clicking `Deleted files` and being redirected to personal trash is wrong.
         },
         {
-          allowContextActions,
           text: currentNodeName,
           onClick: () => eventBus.publish('app.files.list.load')
         }

From 392a24ce2b115bdf477409e593e885b2c5a3fdb7 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 13:46:55 +0100
Subject: [PATCH 09/39] Purge navigate space trash

---
 .../SideBar/Actions/SpaceActions.vue          |  3 -
 .../components/Spaces/SpaceContextActions.vue | 12 ---
 .../SpaceContextActions.spec.ts.snap          | 13 ----
 .../web-pkg/src/mixins/spaces/deletedFiles.ts | 31 --------
 .../unit/mixins/spaces/deletedFiles.spec.ts   | 74 -------------------
 5 files changed, 133 deletions(-)
 delete mode 100644 packages/web-pkg/src/mixins/spaces/deletedFiles.ts
 delete mode 100644 packages/web-pkg/tests/unit/mixins/spaces/deletedFiles.spec.ts

diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
index d913b519158..cc99ba674f6 100644
--- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
+++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -37,7 +37,6 @@
 import ActionMenuItem from 'web-pkg/src/components/ContextActions/ActionMenuItem.vue'
 import Rename from 'web-pkg/src/mixins/spaces/rename'
 import Delete from 'web-pkg/src/mixins/spaces/delete'
-import DeletedFiles from 'web-pkg/src/mixins/spaces/deletedFiles'
 import Disable from 'web-pkg/src/mixins/spaces/disable'
 import Restore from 'web-pkg/src/mixins/spaces/restore'
 import EditDescription from 'web-pkg/src/mixins/spaces/editDescription'
@@ -57,7 +56,6 @@ export default defineComponent({
   mixins: [
     Rename,
     Delete,
-    DeletedFiles,
     EditDescription,
     EditReadmeContent,
     Disable,
@@ -85,7 +83,6 @@ export default defineComponent({
         ...this.$_uploadImage_items,
         ...this.$_editReadmeContent_items,
         ...this.$_editQuota_items,
-        ...this.$_deletedFiles_items,
         ...this.$_restore_items,
         ...this.$_delete_items,
         ...this.$_disable_items
diff --git a/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue b/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
index c81578ad5d6..0811362e400 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
@@ -36,7 +36,6 @@ import Restore from 'web-pkg/src/mixins/spaces/restore'
 import ShowDetails from '../../mixins/actions/showDetails'
 import EditDescription from 'web-pkg/src/mixins/spaces/editDescription'
 import EditQuota from 'web-pkg/src/mixins/spaces/editQuota'
-import DeletedFiles from 'web-pkg/src/mixins/spaces/deletedFiles'
 import Disable from 'web-pkg/src/mixins/spaces/disable'
 import ShowMembers from 'web-pkg/src/mixins/spaces/showMembers'
 import UploadImage from '../../mixins/spaces/actions/uploadImage'
@@ -55,7 +54,6 @@ export default defineComponent({
     Delete,
     EditDescription,
     EditQuota,
-    DeletedFiles,
     Disable,
     ShowDetails,
     ShowMembers,
@@ -110,12 +108,6 @@ export default defineComponent({
           items: this.menuItemsSecondaryActions
         })
       }
-      if (this.menuItemsTrashBin.length) {
-        sections.push({
-          name: 'trashBin',
-          items: this.menuItemsTrashBin
-        })
-      }
       if (this.menuItemsSidebar.length) {
         sections.push({
           name: 'sidebar',
@@ -156,10 +148,6 @@ export default defineComponent({
 
       return [...fileHandlers].filter((item) => item.isEnabled(this.filterParams))
     },
-    menuItemsTrashBin() {
-      const fileHandlers = [...this.$_deletedFiles_items]
-      return [...fileHandlers].filter((item) => item.isEnabled(this.filterParams))
-    },
     menuItemsSidebar() {
       const fileHandlers = [...this.$_showDetails_items]
       return [...fileHandlers].filter((item) => item.isEnabled(this.filterParams))
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceContextActions.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceContextActions.spec.ts.snap
index 92583e071e8..ef375df249d 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceContextActions.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceContextActions.spec.ts.snap
@@ -29,19 +29,6 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
         </button>
       </li>
     </ul>
-    <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border" id="oc-files-context-actions-trashBin">
-      <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
-          <!-- @slot Content of the button -->
-          <span class="oc-icon oc-icon-m oc-icon-passive">
-            <!---->
-          </span>
-          <span class="oc-files-context-action-label">Deleted files</span>
-          <!--v-if-->
-          <!--v-if-->
-        </button>
-      </li>
-    </ul>
     <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-sidebar">
       <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
         <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
diff --git a/packages/web-pkg/src/mixins/spaces/deletedFiles.ts b/packages/web-pkg/src/mixins/spaces/deletedFiles.ts
deleted file mode 100644
index e484a6d3402..00000000000
--- a/packages/web-pkg/src/mixins/spaces/deletedFiles.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-
-export default {
-  computed: {
-    $_deletedFiles_items() {
-      return [
-        {
-          name: 'deletedFiles',
-          icon: 'delete-bin-5',
-          label: () => {
-            return this.$gettext('Deleted files')
-          },
-          handler: this.$_deletedFiles_trigger,
-          isEnabled: ({ resources }) => {
-            return resources.length === 1
-          },
-          componentType: 'button',
-          class: 'oc-files-actions-delete-trigger'
-        }
-      ]
-    }
-  },
-  methods: {
-    $_deletedFiles_trigger() {
-      return this.$router.push({
-        name: 'files-trash-generic',
-        ...createFileRouteOptions(this.space, { fileId: this.space.fileId })
-      })
-    }
-  }
-}
diff --git a/packages/web-pkg/tests/unit/mixins/spaces/deletedFiles.spec.ts b/packages/web-pkg/tests/unit/mixins/spaces/deletedFiles.spec.ts
deleted file mode 100644
index bf04b118da9..00000000000
--- a/packages/web-pkg/tests/unit/mixins/spaces/deletedFiles.spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import DeletedFiles from 'web-pkg/src/mixins/spaces/deletedFiles'
-import { buildSpace, SpaceResource } from 'web-client/src/helpers'
-import { mockDeep } from 'jest-mock-extended'
-import {
-  createStore,
-  defaultPlugins,
-  mount,
-  defaultStoreMockOptions,
-  defaultComponentMocks
-} from 'web-test-helpers'
-
-const Component = {
-  template: '<div></div>',
-  mixins: [DeletedFiles]
-}
-
-describe('delete', () => {
-  afterEach(() => jest.clearAllMocks())
-
-  describe('isEnabled property', () => {
-    it('should be false when not resource given', () => {
-      const { wrapper } = getWrapper()
-      expect(wrapper.vm.$_deletedFiles_items[0].isEnabled({ resources: [] })).toBe(false)
-    })
-    it('should be true when resource is given', () => {
-      const spaceMock = {
-        id: '1'
-      }
-      const { wrapper } = getWrapper()
-      expect(
-        wrapper.vm.$_deletedFiles_items[0].isEnabled({ resources: [buildSpace(spaceMock)] })
-      ).toBe(true)
-    })
-  })
-
-  describe('method "$_deletedFiles_trigger"', () => {
-    it('should trigger route change', async () => {
-      const driveAliasAndItem = 'project/mars'
-
-      const { mocks, wrapper } = getWrapper()
-      mocks.space.getDriveAliasAndItem.mockReturnValueOnce(driveAliasAndItem)
-      await wrapper.vm.$_deletedFiles_trigger()
-
-      expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
-        name: 'files-trash-generic',
-        params: {
-          driveAliasAndItem
-        },
-        query: {}
-      })
-    })
-  })
-})
-
-function getWrapper() {
-  const mocks = {
-    ...defaultComponentMocks(),
-    space: mockDeep<SpaceResource>()
-  }
-  const storeOptions = {
-    ...defaultStoreMockOptions
-  }
-  const store = createStore(storeOptions)
-  return {
-    mocks,
-    storeOptions,
-    wrapper: mount(Component, {
-      global: {
-        mocks,
-        plugins: [...defaultPlugins(), store]
-      }
-    })
-  }
-}

From 26e1406adc7518becdc0cabda47fdb32b223b4d5 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 13:54:37 +0100
Subject: [PATCH 10/39] Lint

---
 .../web-app-files/src/components/FilesList/ContextActions.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ContextActions.vue b/packages/web-app-files/src/components/FilesList/ContextActions.vue
index 222fd2e5cbc..8c528d9d1c3 100644
--- a/packages/web-app-files/src/components/FilesList/ContextActions.vue
+++ b/packages/web-app-files/src/components/FilesList/ContextActions.vue
@@ -139,7 +139,7 @@ export default {
         ...this.$_acceptShare_items,
         ...this.$_declineShare_items,
         ...this.$_setSpaceImage_items,
-        ...this.$_setSpaceReadme_items,
+        ...this.$_setSpaceReadme_items
       ].filter((item) => item.isEnabled(this.filterParams))
     },
 

From cdd64f48a4870eaaf469958fba1101e348d5cd54 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 15:46:05 +0100
Subject: [PATCH 11/39] Navigate to personal trash if no spaces are there

---
 .../src/views/trash/Overview.vue              | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index e9fcb02d4da..322c34d8cab 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="oc-flex">
+  <app-loading-spinner v-if="loadResourcesTask.isRunning || !loadResourcesTask.last" />
+  <div v-else class="oc-flex">
     <files-view-wrapper>
       <app-bar
         :breadcrumbs="breadcrumbs"
@@ -59,7 +60,7 @@ import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
-import { configurationManager, useGraphClient } from 'web-pkg'
+import { configurationManager, useGraphClient, useRouter } from 'web-pkg'
 import { createLocationTrash } from 'web-app-files/src/router'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'
@@ -69,8 +70,10 @@ export default defineComponent({
   name: 'TrashOverview',
   components: { FilesViewWrapper, AppBar },
   methods: { createLocationTrash },
-  setup: function (props) {
+  setup: function () {
+    console.log('setup')
     const { $gettext } = useGettext()
+    const router = useRouter()
     const sortBy = ref('name')
     const sortDir = ref('asc')
     const filterTerm = ref('')
@@ -85,7 +88,17 @@ export default defineComponent({
       } = yield unref(graphClient).drives.listMyDrives()
       const drives = drivesResponse
         .map((space) => buildSpace({ ...space, serverUrl: configurationManager.serverUrl }))
-        .filter((space) => space.driveType === 'project' || space.driveType === 'personal')
+        .filter(
+          (space) =>
+            space.disabled !== true &&
+            (space.driveType === 'project' || space.driveType === 'personal')
+        )
+
+      console.log(drives)
+      if (drives.length === 1) {
+        return router.push(getTrashLink(drives.pop()))
+      }
+
       spaces.value = orderBy(drives, 'name', 'asc')
     })
 
@@ -173,7 +186,7 @@ export default defineComponent({
       await loadResourcesTask.perform()
 
       nextTick(() => {
-        markInstance.value = new Mark(unref(tableRef).$el)
+        markInstance.value = new Mark(unref(tableRef)?.$el)
       })
     })
 
@@ -204,7 +217,8 @@ export default defineComponent({
       orderedSpaces,
       breadcrumbs,
       getSpaceName,
-      getTrashLink
+      getTrashLink,
+      loadResourcesTask
     }
   }
 })

From 35c395859fad76560c0b3fb4a80ee325d41a22e0 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 16:18:13 +0100
Subject: [PATCH 12/39] Navigate to personal trash if no spaces are there

---
 packages/web-app-files/src/index.ts                 | 2 +-
 packages/web-app-files/src/views/trash/Overview.vue | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/index.ts b/packages/web-app-files/src/index.ts
index 5d86728d9f4..c4f10b5d62e 100644
--- a/packages/web-app-files/src/index.ts
+++ b/packages/web-app-files/src/index.ts
@@ -80,7 +80,7 @@ const navItems = [
     icon: 'delete-bin-5',
     route: {
       path: `/${appInfo.id}/trash`,
-      activeFor: [{ path: `/${appInfo.id}/trash/` }]
+      activeFor: [{ path: `/${appInfo.id}/trash` }]
     },
     enabled(capabilities) {
       return capabilities.dav && capabilities.dav.trashbin === '1.0'
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 322c34d8cab..3ae4d792236 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -94,7 +94,6 @@ export default defineComponent({
             (space.driveType === 'project' || space.driveType === 'personal')
         )
 
-      console.log(drives)
       if (drives.length === 1) {
         return router.push(getTrashLink(drives.pop()))
       }
@@ -123,10 +122,10 @@ export default defineComponent({
 
         if (prop === 'name') {
           if (s1.driveType === 'personal') {
-            return s1
+            return -1
           }
           if (s2.driveType === 'personal') {
-            return s2
+            return -1
           }
         }
 

From d66f1eae5d2b17b43cde3051ec9efd5bd7b8d186 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 16:26:44 +0100
Subject: [PATCH 13/39] Make oc10 compatible

---
 .../src/views/trash/Overview.vue              | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 3ae4d792236..ea8dd87bf3b 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -60,7 +60,12 @@ import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
-import { configurationManager, useGraphClient, useRouter } from 'web-pkg'
+import {
+  configurationManager,
+  useCapabilityProjectSpacesEnabled,
+  useGraphClient,
+  useRouter
+} from 'web-pkg'
 import { createLocationTrash } from 'web-app-files/src/router'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'
@@ -71,9 +76,9 @@ export default defineComponent({
   components: { FilesViewWrapper, AppBar },
   methods: { createLocationTrash },
   setup: function () {
-    console.log('setup')
-    const { $gettext } = useGettext()
     const router = useRouter()
+    const hasProjectSpaces = useCapabilityProjectSpacesEnabled
+    const { $gettext } = useGettext()
     const sortBy = ref('name')
     const sortDir = ref('asc')
     const filterTerm = ref('')
@@ -94,10 +99,6 @@ export default defineComponent({
             (space.driveType === 'project' || space.driveType === 'personal')
         )
 
-      if (drives.length === 1) {
-        return router.push(getTrashLink(drives.pop()))
-      }
-
       spaces.value = orderBy(drives, 'name', 'asc')
     })
 
@@ -182,8 +183,15 @@ export default defineComponent({
     }
 
     onMounted(async () => {
+      if (!hasProjectSpaces) {
+        return router.push(createLocationTrash('files-trash-generic'))
+      }
       await loadResourcesTask.perform()
 
+      if (unref(spaces).length <= 1) {
+        return router.push(createLocationTrash('files-trash-generic'))
+      }
+
       nextTick(() => {
         markInstance.value = new Mark(unref(tableRef)?.$el)
       })
@@ -211,6 +219,7 @@ export default defineComponent({
       fields,
       tableRef,
       spaces,
+      hasProjectSpaces,
       filter,
       handleSort,
       orderedSpaces,

From 8f5d8ce802979d2698a69cbf4794fc856fd19288 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 1 Mar 2023 16:45:58 +0100
Subject: [PATCH 14/39] Make oc10 compatible

---
 packages/web-app-files/src/views/trash/Overview.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index ea8dd87bf3b..b602038271b 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -77,7 +77,6 @@ export default defineComponent({
   methods: { createLocationTrash },
   setup: function () {
     const router = useRouter()
-    const hasProjectSpaces = useCapabilityProjectSpacesEnabled
     const { $gettext } = useGettext()
     const sortBy = ref('name')
     const sortDir = ref('asc')
@@ -86,6 +85,7 @@ export default defineComponent({
     const tableRef = ref(undefined)
     const spaces = ref([])
     const { graphClient } = useGraphClient()
+    const hasProjectSpaces = useCapabilityProjectSpacesEnabled()
 
     const loadResourcesTask = useTask(function* (signal) {
       const {
@@ -183,7 +183,7 @@ export default defineComponent({
     }
 
     onMounted(async () => {
-      if (!hasProjectSpaces) {
+      if (!unref(hasProjectSpaces)) {
         return router.push(createLocationTrash('files-trash-generic'))
       }
       await loadResourcesTask.perform()

From 06dc2303515680655b5cdd0f1c33a11feda168a3 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 2 Mar 2023 14:26:32 +0100
Subject: [PATCH 15/39] Fix e2e open trashbin

---
 tests/e2e/cucumber/steps/ui/spaces.ts           | 12 +++++++++---
 tests/e2e/support/objects/app-files/index.ts    |  1 +
 .../e2e/support/objects/app-files/page/index.ts |  3 +++
 .../objects/app-files/page/trashbin/overview.ts | 14 ++++++++++++++
 .../support/objects/app-files/spaces/actions.ts | 12 ------------
 .../support/objects/app-files/spaces/index.ts   |  5 -----
 .../objects/app-files/trashbin/actions.ts       | 12 ++++++++++++
 .../support/objects/app-files/trashbin/index.ts | 17 +++++++++++++++++
 8 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 tests/e2e/support/objects/app-files/page/trashbin/overview.ts
 create mode 100644 tests/e2e/support/objects/app-files/trashbin/actions.ts
 create mode 100644 tests/e2e/support/objects/app-files/trashbin/index.ts

diff --git a/tests/e2e/cucumber/steps/ui/spaces.ts b/tests/e2e/cucumber/steps/ui/spaces.ts
index 03d06187cb8..ab138f6d85a 100644
--- a/tests/e2e/cucumber/steps/ui/spaces.ts
+++ b/tests/e2e/cucumber/steps/ui/spaces.ts
@@ -159,10 +159,16 @@ When(
   '{string} navigates to the trashbin of the project space {string}',
   async function (this: World, stepUser: string, key: string): Promise<void> {
     const { page } = this.actorsEnvironment.getActor({ key: stepUser })
-    const pageObject = new objects.applicationFiles.page.spaces.Projects({ page })
+    const pageObject = new objects.applicationFiles.page.trashbin.Overview({ page })
     await pageObject.navigate()
-    const spacesObject = new objects.applicationFiles.Spaces({ page })
-    await spacesObject.openTrashbin(key)
+    console.log('!!!!!!!!!!!')
+    console.log(key)
+    console.log('!!!!!!!!!!!!!!!!!!!!')
+    //const spacesObject = new objects.applicationFiles.Spaces({ page })
+    //await spacesObject.openTrashbin(key)
+
+    const trashbinObject = new objects.applicationFiles.Trashbin({ page })
+    await trashbinObject.open(key)
   }
 )
 
diff --git a/tests/e2e/support/objects/app-files/index.ts b/tests/e2e/support/objects/app-files/index.ts
index 04ddbecec94..65c97d86c35 100644
--- a/tests/e2e/support/objects/app-files/index.ts
+++ b/tests/e2e/support/objects/app-files/index.ts
@@ -3,3 +3,4 @@ export { Link } from './link'
 export { Resource } from './resource'
 export { Share } from './share'
 export { Spaces } from './spaces'
+export { Trashbin } from './trashbin'
diff --git a/tests/e2e/support/objects/app-files/page/index.ts b/tests/e2e/support/objects/app-files/page/index.ts
index 947a7f53949..fe1a202f13a 100644
--- a/tests/e2e/support/objects/app-files/page/index.ts
+++ b/tests/e2e/support/objects/app-files/page/index.ts
@@ -4,5 +4,8 @@ import { Projects } from './spaces/projects'
 
 export { Public } from './public'
 
+import { Overview } from './trashbin/overview'
+
 export const shares = { WithMe }
 export const spaces = { Personal, Projects }
+export const trashbin = { Overview }
diff --git a/tests/e2e/support/objects/app-files/page/trashbin/overview.ts b/tests/e2e/support/objects/app-files/page/trashbin/overview.ts
new file mode 100644
index 00000000000..96ad03ad1ba
--- /dev/null
+++ b/tests/e2e/support/objects/app-files/page/trashbin/overview.ts
@@ -0,0 +1,14 @@
+import { Page } from 'playwright'
+
+export class Overview {
+  #page: Page
+
+  constructor({ page }: { page: Page }) {
+    this.#page = page
+  }
+
+  async navigate(): Promise<void> {
+    await this.#page.locator('//a[@data-nav-name="files-trash-overview"]').click()
+    await this.#page.waitForSelector('#app-loading-spinner', { state: 'detached' })
+  }
+}
diff --git a/tests/e2e/support/objects/app-files/spaces/actions.ts b/tests/e2e/support/objects/app-files/spaces/actions.ts
index c9c774b1808..74b6033aeb7 100644
--- a/tests/e2e/support/objects/app-files/spaces/actions.ts
+++ b/tests/e2e/support/objects/app-files/spaces/actions.ts
@@ -209,18 +209,6 @@ export const canUserEditSpaceResource = async (
 export const reloadSpacePage = async (page): Promise<void> => {
   await page.reload()
 }
-export interface openSpaceTrashBinArgs {
-  id: string
-  page: Page
-}
-export const openSpaceTrashBin = async (args: openSpaceTrashBinArgs): Promise<void> => {
-  const { id, page } = args
-  await openSpace({ page, id })
-  await page.locator(spaceContextButton).click()
-  await page.locator(spaceDeletedFilesButton).click()
-}
-
-/**/
 
 export const changeSpaceImage = async (args: {
   id: string
diff --git a/tests/e2e/support/objects/app-files/spaces/index.ts b/tests/e2e/support/objects/app-files/spaces/index.ts
index 58e063c64eb..d2ace478f30 100644
--- a/tests/e2e/support/objects/app-files/spaces/index.ts
+++ b/tests/e2e/support/objects/app-files/spaces/index.ts
@@ -104,11 +104,6 @@ export class Spaces {
     await reloadSpacePage(this.#page)
   }
 
-  async openTrashbin(key): Promise<void> {
-    const { id } = this.#spacesEnvironment.getSpace({ key })
-    await openSpaceTrashBin({ id, page: this.#page })
-  }
-
   async changeSpaceImage({ key, resource }: { key: string; resource: File }): Promise<void> {
     const { id } = this.#spacesEnvironment.getSpace({ key })
     await changeSpaceImage({ id, resource, page: this.#page })
diff --git a/tests/e2e/support/objects/app-files/trashbin/actions.ts b/tests/e2e/support/objects/app-files/trashbin/actions.ts
new file mode 100644
index 00000000000..5690fa66538
--- /dev/null
+++ b/tests/e2e/support/objects/app-files/trashbin/actions.ts
@@ -0,0 +1,12 @@
+import { Page } from 'playwright'
+import util from "util";
+
+const spaceIdSelector = '//tr[@data-item-id="%s"]//a'
+export interface openTrashBinArgs {
+  id: string
+  page: Page
+}
+export const openTrashbin = async (args: openTrashBinArgs): Promise<void> => {
+  const { id, page } = args
+  await page.locator(util.format(spaceIdSelector, id)).click()
+}
diff --git a/tests/e2e/support/objects/app-files/trashbin/index.ts b/tests/e2e/support/objects/app-files/trashbin/index.ts
new file mode 100644
index 00000000000..715212ce3d0
--- /dev/null
+++ b/tests/e2e/support/objects/app-files/trashbin/index.ts
@@ -0,0 +1,17 @@
+import { Page } from 'playwright'
+import { openTrashbin } from './actions'
+import { SpacesEnvironment } from '../../../environment'
+export class Trashbin {
+  #page: Page
+  #spacesEnvironment: SpacesEnvironment
+
+  constructor({ page }: { page: Page }) {
+    this.#page = page
+    this.#spacesEnvironment = new SpacesEnvironment()
+  }
+
+  async open(key: string): Promise<void> {
+    const { id } = this.#spacesEnvironment.getSpace({ key })
+    await openTrashbin({ page: this.#page, id })
+  }
+}

From 47d17cd4fe0847f85a7211cfb3c2ce62af8a0b28 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 2 Mar 2023 14:26:59 +0100
Subject: [PATCH 16/39] Fix e2e open trashbin

---
 tests/e2e/support/objects/app-files/spaces/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/e2e/support/objects/app-files/spaces/index.ts b/tests/e2e/support/objects/app-files/spaces/index.ts
index d2ace478f30..843d2fe9bf7 100644
--- a/tests/e2e/support/objects/app-files/spaces/index.ts
+++ b/tests/e2e/support/objects/app-files/spaces/index.ts
@@ -13,7 +13,6 @@ import {
   createSpace,
   createSpaceArgs,
   openSpace,
-  openSpaceTrashBin,
   reloadSpacePage,
   removeAccessMembersArgs,
   removeAccessSpaceMembers,

From df483f20157e9b7912c9eaa7e906dc504f2fcf8b Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 2 Mar 2023 14:28:27 +0100
Subject: [PATCH 17/39] Fix e2e open trashbin

---
 packages/web-app-files/src/views/trash/Overview.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index b602038271b..dc69d8c7e7b 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -188,8 +188,8 @@ export default defineComponent({
       }
       await loadResourcesTask.perform()
 
-      if (unref(spaces).length <= 1) {
-        return router.push(createLocationTrash('files-trash-generic'))
+      if (unref(spaces).length === 1) {
+        return router.push(getTrashLink(unref(spaces).pop()))
       }
 
       nextTick(() => {

From 03b9d1bca981d3d0267a96512ef581b1ae6a19d5 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 2 Mar 2023 14:30:45 +0100
Subject: [PATCH 18/39] Fix e2e open trashbin

---
 tests/e2e/cucumber/steps/ui/spaces.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/tests/e2e/cucumber/steps/ui/spaces.ts b/tests/e2e/cucumber/steps/ui/spaces.ts
index ab138f6d85a..a4e78071286 100644
--- a/tests/e2e/cucumber/steps/ui/spaces.ts
+++ b/tests/e2e/cucumber/steps/ui/spaces.ts
@@ -161,12 +161,6 @@ When(
     const { page } = this.actorsEnvironment.getActor({ key: stepUser })
     const pageObject = new objects.applicationFiles.page.trashbin.Overview({ page })
     await pageObject.navigate()
-    console.log('!!!!!!!!!!!')
-    console.log(key)
-    console.log('!!!!!!!!!!!!!!!!!!!!')
-    //const spacesObject = new objects.applicationFiles.Spaces({ page })
-    //await spacesObject.openTrashbin(key)
-
     const trashbinObject = new objects.applicationFiles.Trashbin({ page })
     await trashbinObject.open(key)
   }

From 7d12e3015ec086c9de51c275a56a16918425e049 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 2 Mar 2023 14:36:53 +0100
Subject: [PATCH 19/39] Add changelog item

---
 .../unreleased/enhancement-introduce-trashbin-overview     | 7 +++++++
 tests/e2e/support/objects/app-files/trashbin/actions.ts    | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 changelog/unreleased/enhancement-introduce-trashbin-overview

diff --git a/changelog/unreleased/enhancement-introduce-trashbin-overview b/changelog/unreleased/enhancement-introduce-trashbin-overview
new file mode 100644
index 00000000000..3da1b122f1c
--- /dev/null
+++ b/changelog/unreleased/enhancement-introduce-trashbin-overview
@@ -0,0 +1,7 @@
+Enhancement: Introduce trashbin overview
+
+We've added a trashbin overview page, where the user chan see their personal trashbin but also the trashbin of
+the spaces where they are assigned to.
+
+https://github.com/owncloud/web/pull/8515
+https://github.com/owncloud/web/issues/8517
diff --git a/tests/e2e/support/objects/app-files/trashbin/actions.ts b/tests/e2e/support/objects/app-files/trashbin/actions.ts
index 5690fa66538..d5193d62e62 100644
--- a/tests/e2e/support/objects/app-files/trashbin/actions.ts
+++ b/tests/e2e/support/objects/app-files/trashbin/actions.ts
@@ -1,5 +1,5 @@
 import { Page } from 'playwright'
-import util from "util";
+import util from 'util'
 
 const spaceIdSelector = '//tr[@data-item-id="%s"]//a'
 export interface openTrashBinArgs {

From fdbdb276cd8ce2c15f32123eb7cfacb4235b7865 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 2 Mar 2023 15:10:29 +0100
Subject: [PATCH 20/39] Fix typo

---
 changelog/unreleased/enhancement-introduce-trashbin-overview | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/changelog/unreleased/enhancement-introduce-trashbin-overview b/changelog/unreleased/enhancement-introduce-trashbin-overview
index 3da1b122f1c..a8690dea59b 100644
--- a/changelog/unreleased/enhancement-introduce-trashbin-overview
+++ b/changelog/unreleased/enhancement-introduce-trashbin-overview
@@ -1,6 +1,6 @@
 Enhancement: Introduce trashbin overview
 
-We've added a trashbin overview page, where the user chan see their personal trashbin but also the trashbin of
+We've added a trashbin overview page, where the user can see their personal trashbin but also the trashbin of
 the spaces where they are assigned to.
 
 https://github.com/owncloud/web/pull/8515

From 53a2c7ccdad0075d0e6305f69729244c5c902880 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 2 Mar 2023 18:19:36 +0100
Subject: [PATCH 21/39] Fix space in search result

---
 packages/web-app-files/src/views/trash/Overview.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index dc69d8c7e7b..8694cf6f8e0 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -35,6 +35,7 @@
           </template>
           <template #name="{ item }">
             <oc-button
+              class="oc-display-block"
               type="router-link"
               appearance="raw"
               :to="getTrashLink(item)"

From 39116b8a17bbf05a0c75859e0249a3298de52a67 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 2 Mar 2023 18:21:51 +0100
Subject: [PATCH 22/39] Fixx left padding of icon

---
 packages/web-app-files/src/views/trash/Overview.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 8694cf6f8e0..eff2cbd3b47 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -30,8 +30,8 @@
           @sort="handleSort"
         >
           <template #icon="{ item }">
-            <oc-icon v-if="item.driveType === 'personal'" name="folder" />
-            <oc-icon v-else name="layout-grid" />
+            <oc-icon class="oc-pl-m" v-if="item.driveType === 'personal'" name="folder" />
+            <oc-icon class="oc-pl-m" v-else name="layout-grid" />
           </template>
           <template #name="{ item }">
             <oc-button

From f2980d09ce7fda567eecde59e8f294469e550dc9 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 6 Mar 2023 11:55:29 +0100
Subject: [PATCH 23/39] Add unit tests

---
 .../tests/unit/views/trash/Overview.spec.ts   | 120 ++++++++++++++++++
 .../trash/__snapshots__/Overview.spec.ts.snap |  84 ++++++++++++
 2 files changed, 204 insertions(+)
 create mode 100644 packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
 create mode 100644 packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap

diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
new file mode 100644
index 00000000000..3db91c71358
--- /dev/null
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -0,0 +1,120 @@
+import TrashOverview from '../../../../src/views/trash/Overview.vue'
+import {
+  createStore,
+  defaultComponentMocks,
+  defaultPlugins,
+  defaultStoreMockOptions,
+  defaultStubs,
+  mockAxiosResolve,
+  mount
+} from 'web-test-helpers'
+import { mockDeep } from 'jest-mock-extended'
+import { Graph } from 'web-client'
+import { ClientService } from 'web-pkg'
+import { nextTick } from 'vue'
+
+const spaceMocks = [
+  {
+    id: '1',
+    name: 'admin',
+    disabled: false,
+    driveType: 'personal'
+  },
+  {
+    id: '2',
+    name: 'Project space 1',
+    disabled: false,
+    driveType: 'project'
+  },
+  {
+    id: '3',
+    name: 'Project space 2',
+    disabled: false,
+    driveType: 'project'
+  }
+]
+
+const defaultGraphMock = () => {
+  const graph = mockDeep<Graph>()
+  graph.drives.listMyDrives.mockImplementation(() => mockAxiosResolve({ value: spaceMocks }))
+  return graph
+}
+
+describe('TrashOverview', () => {
+  it('should navigate to default trash if "hasProjectSpaces" is false', () => {
+    const { mocks } = getWrapper({ hasProjectSpaces: false })
+    expect(mocks.$router.push).toHaveBeenCalledWith({ name: 'files-trash-generic' })
+  })
+  it('should navigate to single space trash if only one space exists', async () => {
+    const graph = mockDeep<Graph>()
+    graph.drives.listMyDrives.mockImplementation(() => mockAxiosResolve({ value: [spaceMocks[0]] }))
+    const { mocks, wrapper } = getWrapper({ graph })
+    await wrapper.vm.loadResourcesTask.last
+    expect(mocks.$router.push).toHaveBeenCalledWith({
+      name: 'files-trash-generic',
+      params: { driveAliasAndItem: '' },
+      query: {}
+    })
+  })
+  it('should render all spaces in a table', async () => {
+    const { wrapper } = getWrapper()
+    await wrapper.vm.loadResourcesTask.last
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it('sorts by property name', async () => {
+    // fake
+    const { wrapper } = getWrapper()
+    const sortBy = 'name'
+    const sortDir = 'desc'
+    wrapper.vm.handleSort({ sortBy, sortDir })
+    expect(wrapper.vm.sortBy).toEqual(sortBy)
+    expect(wrapper.vm.sortDir).toEqual(sortDir)
+  })
+  it('should set the sort parameters accordingly when calling "handleSort"', () => {
+    const { wrapper } = getWrapper()
+    const sortBy = 'name'
+    const sortDir = 'desc'
+    wrapper.vm.handleSort({ sortBy, sortDir })
+    expect(wrapper.vm.sortBy).toEqual(sortBy)
+    expect(wrapper.vm.sortDir).toEqual(sortDir)
+  })
+  it('emits events on file click', () => {
+    // fake
+    const { wrapper } = getWrapper()
+    const sortBy = 'name'
+    const sortDir = 'desc'
+    wrapper.vm.handleSort({ sortBy, sortDir })
+    expect(wrapper.vm.sortBy).toEqual(sortBy)
+    expect(wrapper.vm.sortDir).toEqual(sortDir)
+  })
+  it('shows only filtered spaces if filter applied', async () => {
+    const { wrapper } = getWrapper()
+    await wrapper.vm.loadResourcesTask.last
+    wrapper.vm.filterTerm = 'admin'
+    await nextTick()
+    expect(wrapper.vm.orderedSpaces.length).toEqual(1)
+    expect(wrapper.vm.orderedSpaces[0].id).toEqual(spaceMocks[0].id)
+  })
+})
+
+function getWrapper({ hasProjectSpaces = true, graph = defaultGraphMock() } = {}) {
+  const $clientService = mockDeep<ClientService>()
+  $clientService.graphAuthenticated.mockImplementation(() => graph)
+  const mocks = { ...defaultComponentMocks(), $clientService }
+  const storeOptions = { ...defaultStoreMockOptions }
+  const store = createStore(storeOptions)
+  storeOptions.getters.capabilities.mockImplementation(() => ({
+    spaces: { projects: hasProjectSpaces }
+  }))
+
+  return {
+    mocks,
+    wrapper: mount(TrashOverview, {
+      global: {
+        stubs: defaultStubs,
+        mocks,
+        plugins: [...defaultPlugins(), store]
+      }
+    })
+  }
+}
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
new file mode 100644
index 00000000000..1be39e36cf6
--- /dev/null
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TrashOverview should render all spaces in a table 1`] = `
+<div class="oc-flex">
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view">
+      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="false" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassharesnavigation="false" hassidebartoggle="false" hasviewoptions="false" showactionsonselection="false" sidebaropen="false" viewmodes=""></app-bar-stub>
+      <div>
+        <div class="oc-ml-m oc-my-s">
+          <label class="oc-label" for="spaces-filter">Search</label>
+          <div class="oc-position-relative">
+            <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+        </div>
+        <table class="oc-table oc-table-hover oc-table-sticky spaces-table">
+          <thead class="oc-thead">
+            <tr class="oc-table-header-row" tabindex="-1">
+              <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-icon oc-pl-s" style="top: 0px;">
+                <span class="oc-table-thead-content header-text"></span>
+                <!--v-if-->
+              </th>
+              <th aria-sort="ascending" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-name oc-pr-s" style="top: 0px;">
+                <span class="oc-table-thead-content header-text">Name</span>
+                <button aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-button-sort" type="button">
+                  <!-- @slot Content of the button -->
+                  <span class="oc-icon oc-icon-s oc-icon-passive">
+                    <!---->
+                  </span>
+                </button>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false" tabindex="-1">
+              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
+                <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
+                  <!---->
+                </span>
+              </td>
+              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
+                <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Personal</router-link-stub>
+              </td>
+            </tr>
+            <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false" tabindex="-1">
+              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
+                <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
+                  <!---->
+                </span>
+              </td>
+              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
+                <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 1</router-link-stub>
+              </td>
+            </tr>
+            <tr class="oc-tbody-tr oc-tbody-tr-3" data-item-id="3" draggable="false" tabindex="-1">
+              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
+                <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
+                  <!---->
+                </span>
+              </td>
+              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
+                <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 2</router-link-stub>
+              </td>
+            </tr>
+          </tbody>
+          <tfoot class="oc-table-footer">
+            <tr class="oc-table-footer-row">
+              <td class="oc-table-footer-cell" colspan="2">
+                <!-- @slot Footer of the table -->
+                <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+                  <p class="oc-text-muted">3 trashes in total</p>
+                  <!--v-if-->
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+          <!--v-if-->
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;

From 2e507f7ce2b21f575c47477d59df39f392c33981 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 6 Mar 2023 12:05:51 +0100
Subject: [PATCH 24/39] Add unit tests

---
 .../web-app-files/tests/unit/views/trash/Overview.spec.ts  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index 3db91c71358..9a42c6772fc 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -18,7 +18,7 @@ const spaceMocks = [
     id: '1',
     name: 'admin',
     disabled: false,
-    driveType: 'personal'
+    driveType: 'personal',
   },
   {
     id: '2',
@@ -56,9 +56,14 @@ describe('TrashOverview', () => {
       query: {}
     })
   })
+  it('shows the loading spinner during loading', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.find('app-loading-spinner').exists()).toBeTruthy()
+  })
   it('should render all spaces in a table', async () => {
     const { wrapper } = getWrapper()
     await wrapper.vm.loadResourcesTask.last
+    expect(wrapper.find('app-loading-spinner').exists()).toBeFalsy()
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('sorts by property name', async () => {

From bd3ed5acdb8ab6f78348210cb0bf5338f9188d7a Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 6 Mar 2023 12:10:10 +0100
Subject: [PATCH 25/39] Replace height with min-height

---
 packages/web-app-files/src/components/AppBar/AppBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index e514ace69c8..39062decefe 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -212,7 +212,7 @@ export default defineComponent({
   top: 0;
 
   .files-app-bar-controls {
-    height: 52px;
+    min-height: 52px;
   }
 
   .files-app-bar-actions {

From abec1c88c001bae905009f10f9ef8ffbe517ee5c Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 6 Mar 2023 12:14:46 +0100
Subject: [PATCH 26/39] Lint

---
 packages/web-app-files/tests/unit/views/trash/Overview.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index 9a42c6772fc..b392c2c38a5 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -18,7 +18,7 @@ const spaceMocks = [
     id: '1',
     name: 'admin',
     disabled: false,
-    driveType: 'personal',
+    driveType: 'personal'
   },
   {
     id: '2',

From e7b94984d28234a8fd4edf8bbe6b694c767b052e Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 6 Mar 2023 16:07:26 +0100
Subject: [PATCH 27/39] React on review

---
 .../enhancement-introduce-trashbin-overview   |  4 +-
 packages/web-app-files/src/index.ts           |  4 +-
 packages/web-app-files/src/router/trash.ts    |  4 +-
 .../src/views/spaces/Projects.vue             | 10 +--
 .../src/views/trash/Overview.vue              | 63 +++++++++----------
 .../tests/unit/views/trash/Overview.spec.ts   | 22 ++++---
 6 files changed, 48 insertions(+), 59 deletions(-)

diff --git a/changelog/unreleased/enhancement-introduce-trashbin-overview b/changelog/unreleased/enhancement-introduce-trashbin-overview
index a8690dea59b..18d9459a2e6 100644
--- a/changelog/unreleased/enhancement-introduce-trashbin-overview
+++ b/changelog/unreleased/enhancement-introduce-trashbin-overview
@@ -1,7 +1,7 @@
 Enhancement: Introduce trashbin overview
 
-We've added a trashbin overview page, where the user can see their personal trashbin but also the trashbin of
-the spaces where they are assigned to.
+We've added a trashbin overview page, where the user can see their personal trashbins but also the trashbin of
+the spaces they are a member of.
 
 https://github.com/owncloud/web/pull/8515
 https://github.com/owncloud/web/issues/8517
diff --git a/packages/web-app-files/src/index.ts b/packages/web-app-files/src/index.ts
index c4f10b5d62e..8f9b67f9928 100644
--- a/packages/web-app-files/src/index.ts
+++ b/packages/web-app-files/src/index.ts
@@ -79,9 +79,9 @@ const navItems = [
     name: $gettext('Deleted files'),
     icon: 'delete-bin-5',
     route: {
-      path: `/${appInfo.id}/trash`,
-      activeFor: [{ path: `/${appInfo.id}/trash` }]
+      path: `/${appInfo.id}/trash/overview`
     },
+    activeFor: [{ path: `/${appInfo.id}/trash` }],
     enabled(capabilities) {
       return capabilities.dav && capabilities.dav.trashbin === '1.0'
     }
diff --git a/packages/web-app-files/src/router/trash.ts b/packages/web-app-files/src/router/trash.ts
index a76ad2811db..fa20ad400df 100644
--- a/packages/web-app-files/src/router/trash.ts
+++ b/packages/web-app-files/src/router/trash.ts
@@ -22,7 +22,7 @@ export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
     component: components.App,
     children: [
       {
-        path: '',
+        path: 'overview',
         name: locationTrashOverview.name,
         component: components.Trash.Overview,
         meta: {
@@ -32,7 +32,7 @@ export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
       },
       {
         name: locationTrashGeneric.name,
-        path: 'trash/:driveAliasAndItem(.*)?',
+        path: ':driveAliasAndItem(.*)?',
         component: components.Spaces.DriveResolver,
         meta: {
           authContext: 'user',
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 58eb06c5fef..c0f56e28600 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -16,7 +16,7 @@
           <create-space v-if="hasCreatePermission" />
         </template>
       </app-bar>
-      <app-loading-spinner v-if="areResourcesLoading" />
+      <app-loading-spinner v-if="loadResourcesTask.isRunning" />
       <template v-else>
         <no-content-message
           v-if="!spaces.length"
@@ -136,10 +136,6 @@ export default defineComponent({
       store.commit('Files/LOAD_FILES', { currentFolder: null, files: unref(spaces) })
     })
 
-    const areResourcesLoading = computed(() => {
-      return loadResourcesTask.isRunning || !loadResourcesTask.last
-    })
-
     const hasCreatePermission = computed(() => can('create-all', 'Space'))
     const viewModes = computed(() => [ViewModeConstants.tilesView])
 
@@ -149,8 +145,7 @@ export default defineComponent({
       spaces,
       graphClient,
       loadResourcesTask,
-      areResourcesLoading,
-      accessToken,
+            accessToken,
       selectedResourcesIds,
       handleSort,
       sortBy,
@@ -227,7 +222,6 @@ export default defineComponent({
     }
   },
   async created() {
-    await this.loadResourcesTask.perform()
     this.scrollToResourceFromRoute(this.spaces)
   },
   methods: {
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index eff2cbd3b47..40ba775d99d 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -1,6 +1,5 @@
 <template>
-  <app-loading-spinner v-if="loadResourcesTask.isRunning || !loadResourcesTask.last" />
-  <div v-else class="oc-flex">
+  <div class="oc-flex">
     <files-view-wrapper>
       <app-bar
         :breadcrumbs="breadcrumbs"
@@ -10,7 +9,8 @@
         :has-file-extensions="false"
         :has-pagination="false"
       />
-      <div>
+      <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+      <template v-else>
         <oc-text-input
           id="spaces-filter"
           v-model="filterTerm"
@@ -49,34 +49,30 @@
             </div>
           </template>
         </oc-table>
-      </div>
+      </template>
     </files-view-wrapper>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, nextTick, onMounted, ref, unref, watch } from 'vue'
-import { buildSpace } from 'web-client/src/helpers'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
-import {
-  configurationManager,
-  useCapabilityProjectSpacesEnabled,
-  useGraphClient,
-  useRouter
-} from 'web-pkg'
+import { useGraphClient, useRouter, useStore } from 'web-pkg'
 import { createLocationTrash } from 'web-app-files/src/router'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'
 import FilesViewWrapper from 'web-app-files/src/components/FilesViewWrapper.vue'
+import { isPersonalSpaceResource, isProjectSpaceResource } from 'web-client/src/helpers'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 
 export default defineComponent({
   name: 'TrashOverview',
-  components: { FilesViewWrapper, AppBar },
-  methods: { createLocationTrash },
+  components: { FilesViewWrapper, AppBar, AppLoadingSpinner },
   setup: function () {
+    const store = useStore()
     const router = useRouter()
     const { $gettext } = useGettext()
     const sortBy = ref('name')
@@ -84,23 +80,26 @@ export default defineComponent({
     const filterTerm = ref('')
     const markInstance = ref(undefined)
     const tableRef = ref(undefined)
-    const spaces = ref([])
+    const spaces = computed(() => {
+      return orderBy(
+        store.getters['runtime/spaces/spaces'].filter(
+          (s) => isPersonalSpaceResource(s) || isProjectSpaceResource(s)
+        ),
+        'name',
+        'asc'
+      )
+    })
+    console.log(spaces)
+
     const { graphClient } = useGraphClient()
-    const hasProjectSpaces = useCapabilityProjectSpacesEnabled()
-
-    const loadResourcesTask = useTask(function* (signal) {
-      const {
-        data: { value: drivesResponse }
-      } = yield unref(graphClient).drives.listMyDrives()
-      const drives = drivesResponse
-        .map((space) => buildSpace({ ...space, serverUrl: configurationManager.serverUrl }))
-        .filter(
-          (space) =>
-            space.disabled !== true &&
-            (space.driveType === 'project' || space.driveType === 'personal')
-        )
-
-      spaces.value = orderBy(drives, 'name', 'asc')
+
+    const loadResourcesTask = useTask(function* () {
+      store.commit('Files/CLEAR_FILES_SEARCHED')
+      store.commit('Files/CLEAR_CURRENT_FILES_LIST')
+      yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
+        graphClient: unref(graphClient)
+      })
+      store.commit('Files/LOAD_FILES', { currentFolder: null, files: unref(spaces) })
     })
 
     const footerTextTotal = computed(() => {
@@ -184,11 +183,6 @@ export default defineComponent({
     }
 
     onMounted(async () => {
-      if (!unref(hasProjectSpaces)) {
-        return router.push(createLocationTrash('files-trash-generic'))
-      }
-      await loadResourcesTask.perform()
-
       if (unref(spaces).length === 1) {
         return router.push(getTrashLink(unref(spaces).pop()))
       }
@@ -220,7 +214,6 @@ export default defineComponent({
       fields,
       tableRef,
       spaces,
-      hasProjectSpaces,
       filter,
       handleSort,
       orderedSpaces,
diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index b392c2c38a5..6861b4ccb51 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -60,7 +60,7 @@ describe('TrashOverview', () => {
     const { wrapper } = getWrapper()
     expect(wrapper.find('app-loading-spinner').exists()).toBeTruthy()
   })
-  it('should render all spaces in a table', async () => {
+  it('should render spaces list after loading has been finished', async () => {
     const { wrapper } = getWrapper()
     await wrapper.vm.loadResourcesTask.last
     expect(wrapper.find('app-loading-spinner').exists()).toBeFalsy()
@@ -83,14 +83,16 @@ describe('TrashOverview', () => {
     expect(wrapper.vm.sortBy).toEqual(sortBy)
     expect(wrapper.vm.sortDir).toEqual(sortDir)
   })
-  it('emits events on file click', () => {
-    // fake
-    const { wrapper } = getWrapper()
-    const sortBy = 'name'
-    const sortDir = 'desc'
-    wrapper.vm.handleSort({ sortBy, sortDir })
-    expect(wrapper.vm.sortBy).toEqual(sortBy)
-    expect(wrapper.vm.sortDir).toEqual(sortDir)
+  it('navigates to trash on space click', async () => {
+    const { mocks, wrapper } = getWrapper()
+    await wrapper.vm.loadResourcesTask.last
+    console.log(wrapper.html())
+    await wrapper.find(`[data-item-id="${spaceMocks[0].id}"] a`).trigger('click')
+    expect(mocks.$router.push).toHaveBeenCalledWith({
+      name: 'files-trash-generic',
+      params: { driveAliasAndItem: '' },
+      query: {}
+    })
   })
   it('shows only filtered spaces if filter applied', async () => {
     const { wrapper } = getWrapper()
@@ -116,7 +118,7 @@ function getWrapper({ hasProjectSpaces = true, graph = defaultGraphMock() } = {}
     mocks,
     wrapper: mount(TrashOverview, {
       global: {
-        stubs: defaultStubs,
+        stubs: { ...defaultStubs, 'router-link': false },
         mocks,
         plugins: [...defaultPlugins(), store]
       }

From aa20dcdde67de640214573a7761d98969a8fa5f7 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 6 Mar 2023 16:09:23 +0100
Subject: [PATCH 28/39] React on review 2

---
 packages/web-app-files/src/views/trash/Overview.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 40ba775d99d..db50fccb995 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -80,18 +80,17 @@ export default defineComponent({
     const filterTerm = ref('')
     const markInstance = ref(undefined)
     const tableRef = ref(undefined)
+    const { graphClient } = useGraphClient()
+
     const spaces = computed(() => {
       return orderBy(
         store.getters['runtime/spaces/spaces'].filter(
           (s) => isPersonalSpaceResource(s) || isProjectSpaceResource(s)
         ),
-        'name',
-        'asc'
+        unref(sortBy),
+        unref(sortDir)
       )
     })
-    console.log(spaces)
-
-    const { graphClient } = useGraphClient()
 
     const loadResourcesTask = useTask(function* () {
       store.commit('Files/CLEAR_FILES_SEARCHED')

From ed2389202352ab022933b52a7a7a331a7576ec33 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 6 Mar 2023 16:16:10 +0100
Subject: [PATCH 29/39] Fix orderBy func

---
 .../web-app-files/src/views/trash/Overview.vue | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index db50fccb995..b2f94e2e8d4 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -118,19 +118,15 @@ export default defineComponent({
 
     const orderBy = (list, prop, desc) => {
       return [...list].sort((s1, s2) => {
-        let a, b
-
-        if (prop === 'name') {
-          if (s1.driveType === 'personal') {
-            return -1
-          }
-          if (s2.driveType === 'personal') {
-            return -1
-          }
+        if (s1.driveType === 'personal') {
+          return -1
+        }
+        if (s2.driveType === 'personal') {
+          return +1
         }
 
-        a = s1[prop]
-        b = s2[prop]
+        const a = s1[prop]
+        const b = s2[prop]
 
         return desc ? b.localeCompare(a) : a.localeCompare(b)
       })

From 83a631c95d92c32aea608c2af94c7d943291e2ad Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 6 Mar 2023 16:49:23 +0100
Subject: [PATCH 30/39] React on review 3

---
 .../src/views/spaces/GenericTrash.vue         |   2 +-
 .../src/views/spaces/Projects.vue             |   2 +-
 .../src/views/trash/Overview.vue              |   1 +
 .../tests/unit/views/trash/Overview.spec.ts   |  56 +++---
 .../trash/__snapshots__/Overview.spec.ts.snap | 162 ++++++++++++++++++
 5 files changed, 185 insertions(+), 38 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index 0244b06a9bb..d4064135fc0 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -174,7 +174,7 @@ export default defineComponent({
       return [
         {
           text: this.$gettext('Deleted files'),
-          to: createLocationTrash('files-trash-overview') // FIXME: UX of clicking `Deleted files` and being redirected to personal trash is wrong.
+          to: createLocationTrash('files-trash-overview')
         },
         {
           text: currentNodeName,
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index c0f56e28600..96376358b27 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -145,7 +145,7 @@ export default defineComponent({
       spaces,
       graphClient,
       loadResourcesTask,
-            accessToken,
+      accessToken,
       selectedResourcesIds,
       handleSort,
       sortBy,
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index b2f94e2e8d4..f62daf04cc7 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -178,6 +178,7 @@ export default defineComponent({
     }
 
     onMounted(async () => {
+      console.log(unref(spaces))
       if (unref(spaces).length === 1) {
         return router.push(getTrashLink(unref(spaces).pop()))
       }
diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index 6861b4ccb51..7aaebcdbd49 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -5,12 +5,10 @@ import {
   defaultPlugins,
   defaultStoreMockOptions,
   defaultStubs,
-  mockAxiosResolve,
-  mount
+  mount,
+  RouteLocation
 } from 'web-test-helpers'
-import { mockDeep } from 'jest-mock-extended'
-import { Graph } from 'web-client'
-import { ClientService } from 'web-pkg'
+import { mock } from 'jest-mock-extended'
 import { nextTick } from 'vue'
 
 const spaceMocks = [
@@ -18,38 +16,28 @@ const spaceMocks = [
     id: '1',
     name: 'admin',
     disabled: false,
-    driveType: 'personal'
+    driveType: 'personal',
+    getDriveAliasAndItem: () => '1'
   },
   {
     id: '2',
     name: 'Project space 1',
     disabled: false,
-    driveType: 'project'
+    driveType: 'project',
+    getDriveAliasAndItem: () => '2'
   },
   {
     id: '3',
     name: 'Project space 2',
     disabled: false,
-    driveType: 'project'
+    driveType: 'project',
+    getDriveAliasAndItem: () => '3'
   }
 ]
 
-const defaultGraphMock = () => {
-  const graph = mockDeep<Graph>()
-  graph.drives.listMyDrives.mockImplementation(() => mockAxiosResolve({ value: spaceMocks }))
-  return graph
-}
-
 describe('TrashOverview', () => {
-  it('should navigate to default trash if "hasProjectSpaces" is false', () => {
-    const { mocks } = getWrapper({ hasProjectSpaces: false })
-    expect(mocks.$router.push).toHaveBeenCalledWith({ name: 'files-trash-generic' })
-  })
   it('should navigate to single space trash if only one space exists', async () => {
-    const graph = mockDeep<Graph>()
-    graph.drives.listMyDrives.mockImplementation(() => mockAxiosResolve({ value: [spaceMocks[0]] }))
-    const { mocks, wrapper } = getWrapper({ graph })
-    await wrapper.vm.loadResourcesTask.last
+    const { mocks, wrapper } = getWrapper()
     expect(mocks.$router.push).toHaveBeenCalledWith({
       name: 'files-trash-generic',
       params: { driveAliasAndItem: '' },
@@ -58,12 +46,11 @@ describe('TrashOverview', () => {
   })
   it('shows the loading spinner during loading', () => {
     const { wrapper } = getWrapper()
+    wrapper.vm.loadResourcesTask.perform()
     expect(wrapper.find('app-loading-spinner').exists()).toBeTruthy()
   })
-  it('should render spaces list after loading has been finished', async () => {
+  it('should render spaces list', async () => {
     const { wrapper } = getWrapper()
-    await wrapper.vm.loadResourcesTask.last
-    expect(wrapper.find('app-loading-spinner').exists()).toBeFalsy()
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('sorts by property name', async () => {
@@ -85,8 +72,6 @@ describe('TrashOverview', () => {
   })
   it('navigates to trash on space click', async () => {
     const { mocks, wrapper } = getWrapper()
-    await wrapper.vm.loadResourcesTask.last
-    console.log(wrapper.html())
     await wrapper.find(`[data-item-id="${spaceMocks[0].id}"] a`).trigger('click')
     expect(mocks.$router.push).toHaveBeenCalledWith({
       name: 'files-trash-generic',
@@ -96,7 +81,6 @@ describe('TrashOverview', () => {
   })
   it('shows only filtered spaces if filter applied', async () => {
     const { wrapper } = getWrapper()
-    await wrapper.vm.loadResourcesTask.last
     wrapper.vm.filterTerm = 'admin'
     await nextTick()
     expect(wrapper.vm.orderedSpaces.length).toEqual(1)
@@ -104,21 +88,21 @@ describe('TrashOverview', () => {
   })
 })
 
-function getWrapper({ hasProjectSpaces = true, graph = defaultGraphMock() } = {}) {
-  const $clientService = mockDeep<ClientService>()
-  $clientService.graphAuthenticated.mockImplementation(() => graph)
-  const mocks = { ...defaultComponentMocks(), $clientService }
+function getWrapper({ spaces = spaceMocks } = {}) {
   const storeOptions = { ...defaultStoreMockOptions }
   const store = createStore(storeOptions)
-  storeOptions.getters.capabilities.mockImplementation(() => ({
-    spaces: { projects: hasProjectSpaces }
-  }))
+  storeOptions.modules.runtime.modules.spaces.getters.spaces = jest.fn(() => spaces)
+  const mocks = {
+    ...defaultComponentMocks({
+      currentRoute: mock<RouteLocation>({ name: 'trash-overview' })
+    })
+  }
 
   return {
     mocks,
     wrapper: mount(TrashOverview, {
       global: {
-        stubs: { ...defaultStubs, 'router-link': false },
+        stubs: { ...defaultStubs },
         mocks,
         plugins: [...defaultPlugins(), store]
       }
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index 1be39e36cf6..5ea8381e063 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -82,3 +82,165 @@ exports[`TrashOverview should render all spaces in a table 1`] = `
   </div>
 </div>
 `;
+
+exports[`TrashOverview should render spaces list 1`] = `
+<div class="oc-flex">
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view">
+      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="false" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassharesnavigation="false" hassidebartoggle="false" hasviewoptions="false" showactionsonselection="false" sidebaropen="false" viewmodes=""></app-bar-stub>
+      <div class="oc-ml-m oc-my-s">
+        <label class="oc-label" for="spaces-filter">Search</label>
+        <div class="oc-position-relative">
+          <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+      <table class="oc-table oc-table-hover oc-table-sticky spaces-table">
+        <thead class="oc-thead">
+          <tr class="oc-table-header-row" tabindex="-1">
+            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-icon oc-pl-s" style="top: 0px;">
+              <span class="oc-table-thead-content header-text"></span>
+              <!--v-if-->
+            </th>
+            <th aria-sort="ascending" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-name oc-pr-s" style="top: 0px;">
+              <span class="oc-table-thead-content header-text">Name</span>
+              <button aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-button-sort" type="button">
+                <!-- @slot Content of the button -->
+                <span class="oc-icon oc-icon-s oc-icon-passive">
+                  <!---->
+                </span>
+              </button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false" tabindex="-1">
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
+              <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
+                <!---->
+              </span>
+            </td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
+              <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Personal</router-link-stub>
+            </td>
+          </tr>
+          <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false" tabindex="-1">
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
+              <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
+                <!---->
+              </span>
+            </td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
+              <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 1</router-link-stub>
+            </td>
+          </tr>
+          <tr class="oc-tbody-tr oc-tbody-tr-3" data-item-id="3" draggable="false" tabindex="-1">
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
+              <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
+                <!---->
+              </span>
+            </td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
+              <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 2</router-link-stub>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot class="oc-table-footer">
+          <tr class="oc-table-footer-row">
+            <td class="oc-table-footer-cell" colspan="2">
+              <!-- @slot Footer of the table -->
+              <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+                <p class="oc-text-muted">3 trashes in total</p>
+                <!--v-if-->
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <!--v-if-->
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TrashOverview should render spaces list after loading has been finished 1`] = `
+<div class="oc-flex">
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view">
+      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="false" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassharesnavigation="false" hassidebartoggle="false" hasviewoptions="false" showactionsonselection="false" sidebaropen="false" viewmodes=""></app-bar-stub>
+      <div class="oc-ml-m oc-my-s">
+        <label class="oc-label" for="spaces-filter">Search</label>
+        <div class="oc-position-relative">
+          <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+      <table class="oc-table oc-table-hover oc-table-sticky spaces-table">
+        <thead class="oc-thead">
+          <tr class="oc-table-header-row" tabindex="-1">
+            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-icon oc-pl-s" style="top: 0px;">
+              <span class="oc-table-thead-content header-text"></span>
+              <!--v-if-->
+            </th>
+            <th aria-sort="ascending" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-name oc-pr-s" style="top: 0px;">
+              <span class="oc-table-thead-content header-text">Name</span>
+              <button aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-button-sort" type="button">
+                <!-- @slot Content of the button -->
+                <span class="oc-icon oc-icon-s oc-icon-passive">
+                  <!---->
+                </span>
+              </button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false" tabindex="-1">
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
+              <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
+                <!---->
+              </span>
+            </td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
+              <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Personal</router-link-stub>
+            </td>
+          </tr>
+          <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false" tabindex="-1">
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
+              <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
+                <!---->
+              </span>
+            </td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
+              <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 1</router-link-stub>
+            </td>
+          </tr>
+          <tr class="oc-tbody-tr oc-tbody-tr-3" data-item-id="3" draggable="false" tabindex="-1">
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
+              <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
+                <!---->
+              </span>
+            </td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
+              <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 2</router-link-stub>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot class="oc-table-footer">
+          <tr class="oc-table-footer-row">
+            <td class="oc-table-footer-cell" colspan="2">
+              <!-- @slot Footer of the table -->
+              <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+                <p class="oc-text-muted">3 trashes in total</p>
+                <!--v-if-->
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <!--v-if-->
+      </table>
+    </div>
+  </div>
+</div>
+`;

From bb453de974812d5041b2b4031594af7ced982e5d Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Mon, 6 Mar 2023 18:07:49 +0100
Subject: [PATCH 31/39] Rewrite tests

---
 .../src/views/trash/Overview.vue              | 25 ++---
 .../tests/unit/views/spaces/Projects.spec.ts  |  8 +-
 .../tests/unit/views/trash/Overview.spec.ts   | 94 +++++++++++--------
 3 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index f62daf04cc7..bfd95012174 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -24,7 +24,7 @@
           :sort-by="sortBy"
           :sort-dir="sortDir"
           :fields="fields"
-          :data="orderedSpaces"
+          :data="displaySpaces"
           :sticky="true"
           :hover="true"
           @sort="handleSort"
@@ -82,15 +82,11 @@ export default defineComponent({
     const tableRef = ref(undefined)
     const { graphClient } = useGraphClient()
 
-    const spaces = computed(() => {
-      return orderBy(
-        store.getters['runtime/spaces/spaces'].filter(
-          (s) => isPersonalSpaceResource(s) || isProjectSpaceResource(s)
-        ),
-        unref(sortBy),
-        unref(sortDir)
+    const spaces = computed(() =>
+      store.getters['runtime/spaces/spaces'].filter(
+        (s) => isPersonalSpaceResource(s) || isProjectSpaceResource(s)
       )
-    })
+    )
 
     const loadResourcesTask = useTask(function* () {
       store.commit('Files/CLEAR_FILES_SEARCHED')
@@ -108,7 +104,7 @@ export default defineComponent({
     })
     const footerTextFilter = computed(() => {
       return $gettext('%{spaceCount} matching trashes', {
-        spaceCount: unref(orderedSpaces).length
+        spaceCount: unref(displaySpaces).length
       })
     })
 
@@ -116,7 +112,7 @@ export default defineComponent({
       { text: $gettext('Deleted files'), onClick: () => loadResourcesTask.perform() }
     ])
 
-    const orderBy = (list, prop, desc) => {
+    const sort = (list, prop, desc) => {
       return [...list].sort((s1, s2) => {
         if (s1.driveType === 'personal') {
           return -1
@@ -131,8 +127,8 @@ export default defineComponent({
         return desc ? b.localeCompare(a) : a.localeCompare(b)
       })
     }
-    const orderedSpaces = computed(() =>
-      orderBy(filter(unref(spaces), unref(filterTerm)), unref(sortBy), unref(sortDir) === 'desc')
+    const displaySpaces = computed(() =>
+      sort(filter(unref(spaces), unref(filterTerm)), unref(sortBy), unref(sortDir) === 'desc')
     )
     const handleSort = (event) => {
       sortBy.value = event.sortBy
@@ -178,7 +174,6 @@ export default defineComponent({
     }
 
     onMounted(async () => {
-      console.log(unref(spaces))
       if (unref(spaces).length === 1) {
         return router.push(getTrashLink(unref(spaces).pop()))
       }
@@ -212,7 +207,7 @@ export default defineComponent({
       spaces,
       filter,
       handleSort,
-      orderedSpaces,
+      displaySpaces,
       breadcrumbs,
       getSpaceName,
       getTrashLink,
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index cf597e788a3..18e61920a8d 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -10,6 +10,7 @@ import {
   defaultStubs,
   RouteLocation
 } from 'web-test-helpers'
+import { nextTick } from 'vue'
 
 const spacesResources = [
   {
@@ -44,8 +45,10 @@ describe('Projects view', () => {
     expect(wrapper.find('side-bar-stub').exists()).toBeTruthy()
   })
   describe('different files view states', () => {
-    it('shows the loading spinner during loading', () => {
+    it('shows the loading spinner during loading', async () => {
       const { wrapper } = getMountedWrapper()
+      wrapper.vm.loadResourcesTask.perform()
+      await nextTick()
       expect(wrapper.find('oc-spinner-stub').exists()).toBeTruthy()
     })
     it('shows the no-content-message after loading', async () => {
@@ -84,6 +87,9 @@ function getMountedWrapper({ mocks = {}, spaces = [], abilities = [], stubAppBar
   }
   const storeOptions = { ...defaultStoreMockOptions }
   storeOptions.modules.runtime.modules.spaces.getters.spaces = jest.fn(() => spaces)
+  storeOptions.modules.runtime.modules.spaces.actions.reloadProjectSpaces.mockReturnValue(
+    new Promise(() => undefined)
+  )
   const store = createStore(storeOptions)
   return {
     mocks: defaultMocks,
diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index 7aaebcdbd49..c3aac7d493c 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -10,6 +10,7 @@ import {
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { nextTick } from 'vue'
+import { wrap } from 'lodash-es'
 
 const spaceMocks = [
   {
@@ -37,61 +38,72 @@ const spaceMocks = [
 
 describe('TrashOverview', () => {
   it('should navigate to single space trash if only one space exists', async () => {
-    const { mocks, wrapper } = getWrapper()
+    const { mocks } = getWrapper({ spaces: [spaceMocks[1]] })
     expect(mocks.$router.push).toHaveBeenCalledWith({
       name: 'files-trash-generic',
-      params: { driveAliasAndItem: '' },
+      params: { driveAliasAndItem: '2' },
       query: {}
     })
   })
-  it('shows the loading spinner during loading', () => {
-    const { wrapper } = getWrapper()
-    wrapper.vm.loadResourcesTask.perform()
-    expect(wrapper.find('app-loading-spinner').exists()).toBeTruthy()
-  })
-  it('should render spaces list', async () => {
-    const { wrapper } = getWrapper()
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-  it('sorts by property name', async () => {
-    // fake
-    const { wrapper } = getWrapper()
-    const sortBy = 'name'
-    const sortDir = 'desc'
-    wrapper.vm.handleSort({ sortBy, sortDir })
-    expect(wrapper.vm.sortBy).toEqual(sortBy)
-    expect(wrapper.vm.sortDir).toEqual(sortDir)
-  })
-  it('should set the sort parameters accordingly when calling "handleSort"', () => {
-    const { wrapper } = getWrapper()
-    const sortBy = 'name'
-    const sortDir = 'desc'
-    wrapper.vm.handleSort({ sortBy, sortDir })
-    expect(wrapper.vm.sortBy).toEqual(sortBy)
-    expect(wrapper.vm.sortDir).toEqual(sortDir)
+  describe('view states', () => {
+    it('shows the loading spinner during loading', async () => {
+      const { wrapper } = getWrapper()
+      wrapper.vm.loadResourcesTask.perform()
+      await nextTick()
+      expect(wrapper.find('oc-spinner-stub').exists()).toBeTruthy()
+    })
+    it('should render spaces list', async () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.html()).toMatchSnapshot()
+    })
   })
-  it('navigates to trash on space click', async () => {
-    const { mocks, wrapper } = getWrapper()
-    await wrapper.find(`[data-item-id="${spaceMocks[0].id}"] a`).trigger('click')
-    expect(mocks.$router.push).toHaveBeenCalledWith({
-      name: 'files-trash-generic',
-      params: { driveAliasAndItem: '' },
-      query: {}
+  describe('sorting', () => {
+    it('sorts by property name', async () => {
+      const { wrapper } = getWrapper()
+      let sortedSpaces = []
+
+      wrapper.vm.sortBy = 'name'
+      await nextTick()
+      sortedSpaces = wrapper.findComponent<any>({ name: 'oc-table' }).props().data
+      expect(sortedSpaces[0].id).toEqual(spaceMocks[0].id)
+      expect(sortedSpaces[1].id).toEqual(spaceMocks[1].id)
+      expect(sortedSpaces[2].id).toEqual(spaceMocks[2].id)
+
+      wrapper.vm.sortDir = 'desc'
+      await nextTick()
+      console.log(wrapper.html())
+      sortedSpaces = wrapper.findComponent<any>({ name: 'oc-table' }).props().data
+      expect(sortedSpaces[0].id).toEqual(spaceMocks[0].id)
+      expect(sortedSpaces[2].id).toEqual(spaceMocks[2].id)
+      expect(sortedSpaces[1].id).toEqual(spaceMocks[1].id)
+    })
+    it('should set the sort parameters accordingly when calling "handleSort"', () => {
+      const { wrapper } = getWrapper({ spaces: [spaceMocks[0]] })
+      const sortBy = 'members'
+      const sortDir = 'desc'
+      wrapper.vm.handleSort({ sortBy, sortDir })
+      expect(wrapper.vm.sortBy).toEqual(sortBy)
+      expect(wrapper.vm.sortDir).toEqual(sortDir)
     })
   })
-  it('shows only filtered spaces if filter applied', async () => {
-    const { wrapper } = getWrapper()
-    wrapper.vm.filterTerm = 'admin'
-    await nextTick()
-    expect(wrapper.vm.orderedSpaces.length).toEqual(1)
-    expect(wrapper.vm.orderedSpaces[0].id).toEqual(spaceMocks[0].id)
+  describe('filtering', () => {
+    it('shows only filtered spaces if filter applied', async () => {
+      const { wrapper } = getWrapper()
+      wrapper.vm.filterTerm = 'admin'
+      await nextTick()
+      expect(wrapper.vm.displaySpaces.length).toEqual(1)
+      expect(wrapper.vm.displaySpaces[0].id).toEqual(spaceMocks[0].id)
+    })
   })
 })
 
 function getWrapper({ spaces = spaceMocks } = {}) {
   const storeOptions = { ...defaultStoreMockOptions }
   const store = createStore(storeOptions)
-  storeOptions.modules.runtime.modules.spaces.getters.spaces = jest.fn(() => spaces)
+  storeOptions.modules.runtime.modules.spaces.getters.spaces.mockReturnValue(spaces)
+  storeOptions.modules.runtime.modules.spaces.actions.reloadProjectSpaces.mockReturnValue(
+    new Promise(() => undefined)
+  )
   const mocks = {
     ...defaultComponentMocks({
       currentRoute: mock<RouteLocation>({ name: 'trash-overview' })

From 35edc8100d105d123de324559f8fa7ecd84e1f89 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 7 Mar 2023 09:59:40 +0100
Subject: [PATCH 32/39] =?UTF-8?q?Fix=20projects=C2=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-app-files/src/views/spaces/Projects.vue   | 15 +++++++++------
 .../tests/unit/views/trash/Overview.spec.ts       |  3 ++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 96376358b27..fdd38e0c46d 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -82,7 +82,7 @@ import { loadPreview } from 'web-pkg/src/helpers/preview'
 import { ImageDimension } from 'web-pkg/src/constants'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import { configurationManager } from 'web-pkg/src/configuration'
-import { isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'
+import {isProjectSpaceResource, Resource, SpaceResource} from 'web-client/src/helpers'
 import SideBar from '../../components/SideBar/SideBar.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import ResourceTiles from '../../components/FilesList/ResourceTiles.vue'
@@ -92,6 +92,7 @@ import { WebDAV } from 'web-client/src/webdav'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 import { useSelectedResources, useSort, ViewModeConstants } from 'web-app-files/src/composables'
 import { sortFields as availableSortFields } from '../../helpers/ui/resourceTiles'
+import { onMounted } from '@vue/runtime-dom'
 
 export default defineComponent({
   components: {
@@ -127,21 +128,26 @@ export default defineComponent({
     const accessToken = useAccessToken({ store })
     const { graphClient } = useGraphClient()
 
+    const { scrollToResourceFromRoute } = useScrollTo()
+
     const loadResourcesTask = useTask(function* () {
       store.commit('Files/CLEAR_FILES_SEARCHED')
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
       yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
         graphClient: unref(graphClient)
       })
-      store.commit('Files/LOAD_FILES', { currentFolder: null, files: unref(spaces) })
     })
 
     const hasCreatePermission = computed(() => can('create-all', 'Space'))
     const viewModes = computed(() => [ViewModeConstants.tilesView])
 
+    onMounted(() => {
+      store.commit('Files/LOAD_FILES', { currentFolder: null, files: unref(spaces) })
+      scrollToResourceFromRoute(unref(spaces) as Resource[])
+    })
+
     return {
       ...useSideBar(),
-      ...useScrollTo(),
       spaces,
       graphClient,
       loadResourcesTask,
@@ -221,9 +227,6 @@ export default defineComponent({
       immediate: true
     }
   },
-  async created() {
-    this.scrollToResourceFromRoute(this.spaces)
-  },
   methods: {
     ...mapMutations('Files', ['SET_FILE_SELECTION']),
     openSidebarSharePanel(space: SpaceResource) {
diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index c3aac7d493c..9e97f1e002e 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -10,7 +10,6 @@ import {
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { nextTick } from 'vue'
-import { wrap } from 'lodash-es'
 
 const spaceMocks = [
   {
@@ -68,11 +67,13 @@ describe('TrashOverview', () => {
       expect(sortedSpaces[0].id).toEqual(spaceMocks[0].id)
       expect(sortedSpaces[1].id).toEqual(spaceMocks[1].id)
       expect(sortedSpaces[2].id).toEqual(spaceMocks[2].id)
+      console.log(sortedSpaces)
 
       wrapper.vm.sortDir = 'desc'
       await nextTick()
       console.log(wrapper.html())
       sortedSpaces = wrapper.findComponent<any>({ name: 'oc-table' }).props().data
+      console.log(sortedSpaces)
       expect(sortedSpaces[0].id).toEqual(spaceMocks[0].id)
       expect(sortedSpaces[2].id).toEqual(spaceMocks[2].id)
       expect(sortedSpaces[1].id).toEqual(spaceMocks[1].id)

From 20650fa4b3e14393e724b595eaf9b6a53decc8d0 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 7 Mar 2023 10:08:13 +0100
Subject: [PATCH 33/39] refactor: use types and type guards

---
 .../src/views/trash/Overview.vue              | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index bfd95012174..13e0bf08478 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -30,8 +30,8 @@
           @sort="handleSort"
         >
           <template #icon="{ item }">
-            <oc-icon class="oc-pl-m" v-if="item.driveType === 'personal'" name="folder" />
-            <oc-icon class="oc-pl-m" v-else name="layout-grid" />
+            <oc-icon v-if="isPersonalSpaceResource(item)" class="oc-pl-m" name="folder" />
+            <oc-icon v-else class="oc-pl-m" name="layout-grid" />
           </template>
           <template #name="{ item }">
             <oc-button
@@ -65,13 +65,17 @@ import { createLocationTrash } from 'web-app-files/src/router'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'
 import FilesViewWrapper from 'web-app-files/src/components/FilesViewWrapper.vue'
-import { isPersonalSpaceResource, isProjectSpaceResource } from 'web-client/src/helpers'
+import {
+  isPersonalSpaceResource,
+  isProjectSpaceResource,
+  SpaceResource
+} from 'web-client/src/helpers'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 
 export default defineComponent({
   name: 'TrashOverview',
   components: { FilesViewWrapper, AppBar, AppLoadingSpinner },
-  setup: function () {
+  setup() {
     const store = useStore()
     const router = useRouter()
     const { $gettext } = useGettext()
@@ -104,7 +108,7 @@ export default defineComponent({
     })
     const footerTextFilter = computed(() => {
       return $gettext('%{spaceCount} matching trashes', {
-        spaceCount: unref(displaySpaces).length
+        spaceCount: unref(displaySpaces).length.toString()
       })
     })
 
@@ -112,17 +116,17 @@ export default defineComponent({
       { text: $gettext('Deleted files'), onClick: () => loadResourcesTask.perform() }
     ])
 
-    const sort = (list, prop, desc) => {
+    const sort = (list: SpaceResource[], propName: string, desc: boolean) => {
       return [...list].sort((s1, s2) => {
-        if (s1.driveType === 'personal') {
+        if (isPersonalSpaceResource(s1)) {
           return -1
         }
-        if (s2.driveType === 'personal') {
+        if (isPersonalSpaceResource(s2)) {
           return +1
         }
 
-        const a = s1[prop]
-        const b = s2[prop]
+        const a = s1[propName]
+        const b = s2[propName]
 
         return desc ? b.localeCompare(a) : a.localeCompare(b)
       })
@@ -134,7 +138,7 @@ export default defineComponent({
       sortBy.value = event.sortBy
       sortDir.value = event.sortDir
     }
-    const filter = (spaces, filterTerm) => {
+    const filter = (spaces: SpaceResource[], filterTerm: string) => {
       if (!(filterTerm || '').trim()) {
         return spaces
       }
@@ -163,17 +167,17 @@ export default defineComponent({
       }
     ])
 
-    const getSpaceName = (space) => {
-      return space.driveType === 'personal' ? $gettext('Personal') : space.name
+    const getSpaceName = (space: SpaceResource) => {
+      return isPersonalSpaceResource(space) ? $gettext('Personal') : space.name
     }
 
-    const getTrashLink = (space) => {
+    const getTrashLink = (space: SpaceResource) => {
       return createLocationTrash('files-trash-generic', {
         ...createFileRouteOptions(space, { fileId: space.fileId })
       })
     }
 
-    onMounted(async () => {
+    onMounted(() => {
       if (unref(spaces).length === 1) {
         return router.push(getTrashLink(unref(spaces).pop()))
       }
@@ -211,7 +215,8 @@ export default defineComponent({
       breadcrumbs,
       getSpaceName,
       getTrashLink,
-      loadResourcesTask
+      loadResourcesTask,
+      isPersonalSpaceResource
     }
   }
 })

From 935c3f1116ba379ca53b57e8be35d3a3d51d7f8f Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 7 Mar 2023 10:09:03 +0100
Subject: [PATCH 34/39] Fix unit tests

---
 .../web-app-files/tests/unit/views/trash/Overview.spec.ts  | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index 9e97f1e002e..1603fc26740 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -67,16 +67,13 @@ describe('TrashOverview', () => {
       expect(sortedSpaces[0].id).toEqual(spaceMocks[0].id)
       expect(sortedSpaces[1].id).toEqual(spaceMocks[1].id)
       expect(sortedSpaces[2].id).toEqual(spaceMocks[2].id)
-      console.log(sortedSpaces)
 
       wrapper.vm.sortDir = 'desc'
       await nextTick()
-      console.log(wrapper.html())
       sortedSpaces = wrapper.findComponent<any>({ name: 'oc-table' }).props().data
-      console.log(sortedSpaces)
       expect(sortedSpaces[0].id).toEqual(spaceMocks[0].id)
-      expect(sortedSpaces[2].id).toEqual(spaceMocks[2].id)
-      expect(sortedSpaces[1].id).toEqual(spaceMocks[1].id)
+      expect(sortedSpaces[1].id).toEqual(spaceMocks[2].id)
+      expect(sortedSpaces[2].id).toEqual(spaceMocks[1].id)
     })
     it('should set the sort parameters accordingly when calling "handleSort"', () => {
       const { wrapper } = getWrapper({ spaces: [spaceMocks[0]] })

From 42a3f86bcb4838bbaba05b651197708003c7e7f7 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 7 Mar 2023 10:18:38 +0100
Subject: [PATCH 35/39] Lint

---
 packages/web-app-files/src/views/spaces/Projects.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index fdd38e0c46d..f72a94e21e1 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+import { onMounted, computed, defineComponent, unref } from 'vue'
 import { useTask } from 'vue-concurrency'
 import { mapMutations, mapGetters } from 'vuex'
 
@@ -82,7 +82,7 @@ import { loadPreview } from 'web-pkg/src/helpers/preview'
 import { ImageDimension } from 'web-pkg/src/constants'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import { configurationManager } from 'web-pkg/src/configuration'
-import {isProjectSpaceResource, Resource, SpaceResource} from 'web-client/src/helpers'
+import { isProjectSpaceResource, Resource, SpaceResource } from 'web-client/src/helpers'
 import SideBar from '../../components/SideBar/SideBar.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import ResourceTiles from '../../components/FilesList/ResourceTiles.vue'
@@ -92,7 +92,6 @@ import { WebDAV } from 'web-client/src/webdav'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 import { useSelectedResources, useSort, ViewModeConstants } from 'web-app-files/src/composables'
 import { sortFields as availableSortFields } from '../../helpers/ui/resourceTiles'
-import { onMounted } from '@vue/runtime-dom'
 
 export default defineComponent({
   components: {

From cd4c219d44d39a0b3848f0e9064cbc2573775489 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Tue, 7 Mar 2023 10:26:21 +0100
Subject: [PATCH 36/39] Update snapshots

---
 .../trash/__snapshots__/Overview.spec.ts.snap | 166 +-----------------
 1 file changed, 1 insertion(+), 165 deletions(-)

diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index 5ea8381e063..816896ea4aa 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -1,170 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TrashOverview should render all spaces in a table 1`] = `
-<div class="oc-flex">
-  <div class="files-view-wrapper oc-width-expand">
-    <div id="files-view">
-      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="false" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassharesnavigation="false" hassidebartoggle="false" hasviewoptions="false" showactionsonselection="false" sidebaropen="false" viewmodes=""></app-bar-stub>
-      <div>
-        <div class="oc-ml-m oc-my-s">
-          <label class="oc-label" for="spaces-filter">Search</label>
-          <div class="oc-position-relative">
-            <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
-            <!--v-if-->
-          </div>
-          <!--v-if-->
-        </div>
-        <table class="oc-table oc-table-hover oc-table-sticky spaces-table">
-          <thead class="oc-thead">
-            <tr class="oc-table-header-row" tabindex="-1">
-              <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-icon oc-pl-s" style="top: 0px;">
-                <span class="oc-table-thead-content header-text"></span>
-                <!--v-if-->
-              </th>
-              <th aria-sort="ascending" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-name oc-pr-s" style="top: 0px;">
-                <span class="oc-table-thead-content header-text">Name</span>
-                <button aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-button-sort" type="button">
-                  <!-- @slot Content of the button -->
-                  <span class="oc-icon oc-icon-s oc-icon-passive">
-                    <!---->
-                  </span>
-                </button>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false" tabindex="-1">
-              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
-                <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
-                  <!---->
-                </span>
-              </td>
-              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
-                <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Personal</router-link-stub>
-              </td>
-            </tr>
-            <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false" tabindex="-1">
-              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
-                <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
-                  <!---->
-                </span>
-              </td>
-              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
-                <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 1</router-link-stub>
-              </td>
-            </tr>
-            <tr class="oc-tbody-tr oc-tbody-tr-3" data-item-id="3" draggable="false" tabindex="-1">
-              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
-                <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
-                  <!---->
-                </span>
-              </td>
-              <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
-                <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 2</router-link-stub>
-              </td>
-            </tr>
-          </tbody>
-          <tfoot class="oc-table-footer">
-            <tr class="oc-table-footer-row">
-              <td class="oc-table-footer-cell" colspan="2">
-                <!-- @slot Footer of the table -->
-                <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
-                  <p class="oc-text-muted">3 trashes in total</p>
-                  <!--v-if-->
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <!--v-if-->
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`TrashOverview should render spaces list 1`] = `
-<div class="oc-flex">
-  <div class="files-view-wrapper oc-width-expand">
-    <div id="files-view">
-      <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="false" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassharesnavigation="false" hassidebartoggle="false" hasviewoptions="false" showactionsonselection="false" sidebaropen="false" viewmodes=""></app-bar-stub>
-      <div class="oc-ml-m oc-my-s">
-        <label class="oc-label" for="spaces-filter">Search</label>
-        <div class="oc-position-relative">
-          <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
-          <!--v-if-->
-        </div>
-        <!--v-if-->
-      </div>
-      <table class="oc-table oc-table-hover oc-table-sticky spaces-table">
-        <thead class="oc-thead">
-          <tr class="oc-table-header-row" tabindex="-1">
-            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-icon oc-pl-s" style="top: 0px;">
-              <span class="oc-table-thead-content header-text"></span>
-              <!--v-if-->
-            </th>
-            <th aria-sort="ascending" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-name oc-pr-s" style="top: 0px;">
-              <span class="oc-table-thead-content header-text">Name</span>
-              <button aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-button-sort" type="button">
-                <!-- @slot Content of the button -->
-                <span class="oc-icon oc-icon-s oc-icon-passive">
-                  <!---->
-                </span>
-              </button>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false" tabindex="-1">
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
-              <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
-                <!---->
-              </span>
-            </td>
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
-              <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Personal</router-link-stub>
-            </td>
-          </tr>
-          <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false" tabindex="-1">
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
-              <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
-                <!---->
-              </span>
-            </td>
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
-              <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 1</router-link-stub>
-            </td>
-          </tr>
-          <tr class="oc-tbody-tr oc-tbody-tr-3" data-item-id="3" draggable="false" tabindex="-1">
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon oc-pl-s">
-              <span class="oc-icon oc-icon-m oc-icon-passive oc-pl-m">
-                <!---->
-              </span>
-            </td>
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name oc-pr-s">
-              <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-display-block" to="[object Object]">Project space 2</router-link-stub>
-            </td>
-          </tr>
-        </tbody>
-        <tfoot class="oc-table-footer">
-          <tr class="oc-table-footer-row">
-            <td class="oc-table-footer-cell" colspan="2">
-              <!-- @slot Footer of the table -->
-              <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
-                <p class="oc-text-muted">3 trashes in total</p>
-                <!--v-if-->
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <!--v-if-->
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`TrashOverview should render spaces list after loading has been finished 1`] = `
+exports[`TrashOverview view states should render spaces list 1`] = `
 <div class="oc-flex">
   <div class="files-view-wrapper oc-width-expand">
     <div id="files-view">

From 2d36ab6f3fa6eb8395efb3a56969d333393ce205 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 7 Mar 2023 10:29:21 +0100
Subject: [PATCH 37/39] tests: fix unit test about trash sorting

---
 .../tests/unit/views/trash/Overview.spec.ts      | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index 1603fc26740..c9fe96174a9 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -64,16 +64,20 @@ describe('TrashOverview', () => {
       wrapper.vm.sortBy = 'name'
       await nextTick()
       sortedSpaces = wrapper.findComponent<any>({ name: 'oc-table' }).props().data
-      expect(sortedSpaces[0].id).toEqual(spaceMocks[0].id)
-      expect(sortedSpaces[1].id).toEqual(spaceMocks[1].id)
-      expect(sortedSpaces[2].id).toEqual(spaceMocks[2].id)
+      expect(sortedSpaces.map((s) => s.id)).toEqual([
+        spaceMocks[0].id,
+        spaceMocks[1].id,
+        spaceMocks[2].id
+      ])
 
       wrapper.vm.sortDir = 'desc'
       await nextTick()
       sortedSpaces = wrapper.findComponent<any>({ name: 'oc-table' }).props().data
-      expect(sortedSpaces[0].id).toEqual(spaceMocks[0].id)
-      expect(sortedSpaces[1].id).toEqual(spaceMocks[2].id)
-      expect(sortedSpaces[2].id).toEqual(spaceMocks[1].id)
+      expect(sortedSpaces.map((s) => s.id)).toEqual([
+        spaceMocks[0].id,
+        spaceMocks[2].id,
+        spaceMocks[1].id
+      ])
     })
     it('should set the sort parameters accordingly when calling "handleSort"', () => {
       const { wrapper } = getWrapper({ spaces: [spaceMocks[0]] })

From 19e7c51378a2eaba6f9a0e3abddf8640550633f5 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 7 Mar 2023 11:20:08 +0100
Subject: [PATCH 38/39] fix: space loading task in trash and spaces overviews

---
 .../src/views/spaces/Projects.vue             | 24 +++++++++++------
 .../src/views/trash/Overview.vue              | 27 ++++++++++++-------
 .../tests/unit/views/spaces/Projects.spec.ts  |  1 -
 .../tests/unit/views/trash/Overview.spec.ts   |  3 ++-
 4 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index f72a94e21e1..c12fea2ca2f 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -16,7 +16,7 @@
           <create-space v-if="hasCreatePermission" />
         </template>
       </app-bar>
-      <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+      <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
         <no-content-message
           v-if="!spaces.length"
@@ -129,19 +129,26 @@ export default defineComponent({
 
     const { scrollToResourceFromRoute } = useScrollTo()
 
-    const loadResourcesTask = useTask(function* () {
+    const loadResourcesTask = useTask(function* (signal, reloadProjectSpaces: boolean) {
       store.commit('Files/CLEAR_FILES_SEARCHED')
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
-      yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
-        graphClient: unref(graphClient)
-      })
+      if (reloadProjectSpaces) {
+        yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
+          graphClient: unref(graphClient)
+        })
+      }
+      store.commit('Files/LOAD_FILES', { currentFolder: null, files: unref(spaces) })
+    })
+
+    const areResourcesLoading = computed(() => {
+      return loadResourcesTask.isRunning || !loadResourcesTask.last
     })
 
     const hasCreatePermission = computed(() => can('create-all', 'Space'))
     const viewModes = computed(() => [ViewModeConstants.tilesView])
 
-    onMounted(() => {
-      store.commit('Files/LOAD_FILES', { currentFolder: null, files: unref(spaces) })
+    onMounted(async () => {
+      await loadResourcesTask.perform(false)
       scrollToResourceFromRoute(unref(spaces) as Resource[])
     })
 
@@ -150,6 +157,7 @@ export default defineComponent({
       spaces,
       graphClient,
       loadResourcesTask,
+      areResourcesLoading,
       accessToken,
       selectedResourcesIds,
       handleSort,
@@ -172,7 +180,7 @@ export default defineComponent({
       return [
         {
           text: this.$gettext('Spaces'),
-          onClick: () => this.loadResourcesTask.perform()
+          onClick: () => this.loadResourcesTask.perform(true)
         }
       ]
     },
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 13e0bf08478..dd247eb2e08 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -9,7 +9,7 @@
         :has-file-extensions="false"
         :has-pagination="false"
       />
-      <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+      <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
         <oc-text-input
           id="spaces-filter"
@@ -92,15 +92,21 @@ export default defineComponent({
       )
     )
 
-    const loadResourcesTask = useTask(function* () {
+    const loadResourcesTask = useTask(function* (signal, reloadProjectSpaces: boolean) {
       store.commit('Files/CLEAR_FILES_SEARCHED')
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
-      yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
-        graphClient: unref(graphClient)
-      })
+      if (reloadProjectSpaces) {
+        yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
+          graphClient: unref(graphClient)
+        })
+      }
       store.commit('Files/LOAD_FILES', { currentFolder: null, files: unref(spaces) })
     })
 
+    const areResourcesLoading = computed(() => {
+      return loadResourcesTask.isRunning || !loadResourcesTask.last
+    })
+
     const footerTextTotal = computed(() => {
       return $gettext('%{spaceCount} trashes in total', {
         spaceCount: unref(spaces).length.toString()
@@ -113,7 +119,7 @@ export default defineComponent({
     })
 
     const breadcrumbs = computed(() => [
-      { text: $gettext('Deleted files'), onClick: () => loadResourcesTask.perform() }
+      { text: $gettext('Deleted files'), onClick: () => loadResourcesTask.perform(true) }
     ])
 
     const sort = (list: SpaceResource[], propName: string, desc: boolean) => {
@@ -177,14 +183,14 @@ export default defineComponent({
       })
     }
 
-    onMounted(() => {
+    onMounted(async () => {
       if (unref(spaces).length === 1) {
         return router.push(getTrashLink(unref(spaces).pop()))
       }
 
-      nextTick(() => {
-        markInstance.value = new Mark(unref(tableRef)?.$el)
-      })
+      await loadResourcesTask.perform(false)
+      await nextTick()
+      markInstance.value = new Mark(unref(tableRef)?.$el)
     })
 
     watch(filterTerm, () => {
@@ -216,6 +222,7 @@ export default defineComponent({
       getSpaceName,
       getTrashLink,
       loadResourcesTask,
+      areResourcesLoading,
       isPersonalSpaceResource
     }
   }
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index 18e61920a8d..62ef48f4e21 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -47,7 +47,6 @@ describe('Projects view', () => {
   describe('different files view states', () => {
     it('shows the loading spinner during loading', async () => {
       const { wrapper } = getMountedWrapper()
-      wrapper.vm.loadResourcesTask.perform()
       await nextTick()
       expect(wrapper.find('oc-spinner-stub').exists()).toBeTruthy()
     })
diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index c9fe96174a9..a732640589c 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -47,18 +47,19 @@ describe('TrashOverview', () => {
   describe('view states', () => {
     it('shows the loading spinner during loading', async () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.loadResourcesTask.perform()
       await nextTick()
       expect(wrapper.find('oc-spinner-stub').exists()).toBeTruthy()
     })
     it('should render spaces list', async () => {
       const { wrapper } = getWrapper()
+      await wrapper.vm.loadResourcesTask.last
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
   describe('sorting', () => {
     it('sorts by property name', async () => {
       const { wrapper } = getWrapper()
+      await wrapper.vm.loadResourcesTask.last
       let sortedSpaces = []
 
       wrapper.vm.sortBy = 'name'

From b78b69ac85012a54158cb5a6377f1322fcb5a60a Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 7 Mar 2023 13:12:57 +0100
Subject: [PATCH 39/39] fix: revert the change that spaces are not reloaded in
 views

---
 .../web-app-files/src/views/spaces/Projects.vue    | 14 ++++++--------
 .../web-app-files/src/views/trash/Overview.vue     | 14 ++++++--------
 .../tests/unit/views/spaces/Projects.spec.ts       |  7 +------
 .../tests/unit/views/trash/Overview.spec.ts        |  6 +-----
 4 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index c12fea2ca2f..e5e76fae84e 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -129,14 +129,12 @@ export default defineComponent({
 
     const { scrollToResourceFromRoute } = useScrollTo()
 
-    const loadResourcesTask = useTask(function* (signal, reloadProjectSpaces: boolean) {
+    const loadResourcesTask = useTask(function* () {
       store.commit('Files/CLEAR_FILES_SEARCHED')
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
-      if (reloadProjectSpaces) {
-        yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
-          graphClient: unref(graphClient)
-        })
-      }
+      yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
+        graphClient: unref(graphClient)
+      })
       store.commit('Files/LOAD_FILES', { currentFolder: null, files: unref(spaces) })
     })
 
@@ -148,7 +146,7 @@ export default defineComponent({
     const viewModes = computed(() => [ViewModeConstants.tilesView])
 
     onMounted(async () => {
-      await loadResourcesTask.perform(false)
+      await loadResourcesTask.perform()
       scrollToResourceFromRoute(unref(spaces) as Resource[])
     })
 
@@ -180,7 +178,7 @@ export default defineComponent({
       return [
         {
           text: this.$gettext('Spaces'),
-          onClick: () => this.loadResourcesTask.perform(true)
+          onClick: () => this.loadResourcesTask.perform()
         }
       ]
     },
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index dd247eb2e08..658bf43f5a8 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -92,14 +92,12 @@ export default defineComponent({
       )
     )
 
-    const loadResourcesTask = useTask(function* (signal, reloadProjectSpaces: boolean) {
+    const loadResourcesTask = useTask(function* () {
       store.commit('Files/CLEAR_FILES_SEARCHED')
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
-      if (reloadProjectSpaces) {
-        yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
-          graphClient: unref(graphClient)
-        })
-      }
+      yield store.dispatch('runtime/spaces/reloadProjectSpaces', {
+        graphClient: unref(graphClient)
+      })
       store.commit('Files/LOAD_FILES', { currentFolder: null, files: unref(spaces) })
     })
 
@@ -119,7 +117,7 @@ export default defineComponent({
     })
 
     const breadcrumbs = computed(() => [
-      { text: $gettext('Deleted files'), onClick: () => loadResourcesTask.perform(true) }
+      { text: $gettext('Deleted files'), onClick: () => loadResourcesTask.perform() }
     ])
 
     const sort = (list: SpaceResource[], propName: string, desc: boolean) => {
@@ -188,7 +186,7 @@ export default defineComponent({
         return router.push(getTrashLink(unref(spaces).pop()))
       }
 
-      await loadResourcesTask.perform(false)
+      await loadResourcesTask.perform()
       await nextTick()
       markInstance.value = new Mark(unref(tableRef)?.$el)
     })
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index 62ef48f4e21..cf597e788a3 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -10,7 +10,6 @@ import {
   defaultStubs,
   RouteLocation
 } from 'web-test-helpers'
-import { nextTick } from 'vue'
 
 const spacesResources = [
   {
@@ -45,9 +44,8 @@ describe('Projects view', () => {
     expect(wrapper.find('side-bar-stub').exists()).toBeTruthy()
   })
   describe('different files view states', () => {
-    it('shows the loading spinner during loading', async () => {
+    it('shows the loading spinner during loading', () => {
       const { wrapper } = getMountedWrapper()
-      await nextTick()
       expect(wrapper.find('oc-spinner-stub').exists()).toBeTruthy()
     })
     it('shows the no-content-message after loading', async () => {
@@ -86,9 +84,6 @@ function getMountedWrapper({ mocks = {}, spaces = [], abilities = [], stubAppBar
   }
   const storeOptions = { ...defaultStoreMockOptions }
   storeOptions.modules.runtime.modules.spaces.getters.spaces = jest.fn(() => spaces)
-  storeOptions.modules.runtime.modules.spaces.actions.reloadProjectSpaces.mockReturnValue(
-    new Promise(() => undefined)
-  )
   const store = createStore(storeOptions)
   return {
     mocks: defaultMocks,
diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index a732640589c..9871ad3631e 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -45,9 +45,8 @@ describe('TrashOverview', () => {
     })
   })
   describe('view states', () => {
-    it('shows the loading spinner during loading', async () => {
+    it('shows the loading spinner during loading', () => {
       const { wrapper } = getWrapper()
-      await nextTick()
       expect(wrapper.find('oc-spinner-stub').exists()).toBeTruthy()
     })
     it('should render spaces list', async () => {
@@ -104,9 +103,6 @@ function getWrapper({ spaces = spaceMocks } = {}) {
   const storeOptions = { ...defaultStoreMockOptions }
   const store = createStore(storeOptions)
   storeOptions.modules.runtime.modules.spaces.getters.spaces.mockReturnValue(spaces)
-  storeOptions.modules.runtime.modules.spaces.actions.reloadProjectSpaces.mockReturnValue(
-    new Promise(() => undefined)
-  )
   const mocks = {
     ...defaultComponentMocks({
       currentRoute: mock<RouteLocation>({ name: 'trash-overview' })