[full-ci] Init trash overview

changelog/unreleased/enhancement-introduce-trashbin-overview

@@ -0,0 +1,7 @@
+Enhancement: Introduce trashbin overview
+
+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

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 {
+    min-height: 52px;
+  }
+
   .files-app-bar-actions {
     align-items: center;
     display: flex;

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: {
@@ -141,8 +139,7 @@ export default {
         ...this.$_acceptShare_items,
         ...this.$_declineShare_items,
         ...this.$_setSpaceImage_items,
-        ...this.$_setSpaceReadme_items,
-        ...this.$_navigate_space_items
+        ...this.$_setSpaceReadme_items
       ].filter((item) => item.isEnabled(this.filterParams))
     },
 

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

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))

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,8 +79,9 @@ const navItems = [
     name: $gettext('Deleted files'),
     icon: 'delete-bin-5',
     route: {
-      path: `/${appInfo.id}/trash`
+      path: `/${appInfo.id}/trash/overview`
     },
+    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,

packages/web-app-files/src/router/router.ts

@@ -23,4 +23,7 @@ export interface RouteComponents {
     DriveResolver: Component
     Projects: Component
   }
+  Trash: {
+    Overview: Component
+  }
 }

packages/web-app-files/src/router/trash.ts

@@ -1,21 +1,35 @@
 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: 'overview',
+        name: locationTrashOverview.name,
+        component: components.Trash.Overview,
+        meta: {
+          authContext: 'user',
+          title: $gettext('Trash overview')
+        }
+      },
       {
         name: locationTrashGeneric.name,
         path: ':driveAliasAndItem(.*)?',

packages/web-app-files/src/views/spaces/GenericTrash.vue

@@ -167,19 +167,16 @@ 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 [
         {
           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,
           text: currentNodeName,
           onClick: () => eventBus.publish('app.files.list.load')
         }

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: {