feat: add context actions to trash

packages/web-app-files/src/components/Trash/TrashContextActions.vue

@@ -0,0 +1,39 @@
+<template>
+  <context-action-menu :menu-sections="menuSections" :action-options="actionOptions" />
+</template>
+
+<script setup lang="ts">
+import {
+  ContextActionMenu,
+  MenuSection,
+  SpaceActionOptions,
+  useSpaceActionsNavigateToTrash
+} from '@opencloud-eu/web-pkg'
+import { computed, toRef, unref } from 'vue'
+
+const props = defineProps<{
+  actionOptions: SpaceActionOptions
+}>()
+
+const actionOptions = toRef(props, 'actionOptions')
+
+const { actions: navigateToTrashActions } = useSpaceActionsNavigateToTrash()
+
+const menuItemsPrimaryActions = computed(() => {
+  const fileHandlers = [...unref(navigateToTrashActions)]
+  return fileHandlers.filter((item) => item.isVisible(unref(actionOptions)))
+})
+
+const menuSections = computed<MenuSection[]>(() => {
+  const sections: MenuSection[] = []
+
+  if (unref(menuItemsPrimaryActions)) {
+    sections.push({
+      name: 'primaryActions',
+      items: unref(menuItemsPrimaryActions)
+    })
+  }
+
+  return sections
+})
+</script>

packages/web-app-files/src/views/trash/Overview.vue

@@ -34,13 +34,18 @@
             :sort-dir="sortDir"
             :is-side-bar-open="isSideBarOpen"
             :header-position="fileListHeaderY"
-            :has-actions="false"
             :are-thumbnails-displayed="false"
             :are-paths-displayed="false"
             :is-selectable="false"
             :target-route-callback="resourceTargetRouteCallback"
             @sort="handleSort"
           >
+            <template #contextMenu="{ resource, isOpen }">
+              <trash-context-actions
+                v-if="isOpen"
+                :action-options="{ resources: [resource] as SpaceResource[] }"
+              />
+            </template>
             <template #footer>
               <div class="oc-text-center oc-width-1-1 oc-my-s">
                 <p class="oc-text-muted">{{ footerTextTotal }}</p>
@@ -88,10 +93,12 @@ import {
 import { FieldType } from '@opencloud-eu/design-system/helpers'
 import { ResourceTable } from '@opencloud-eu/web-pkg/src'
 import { RouteLocationNamedRaw } from 'vue-router'
+import TrashContextActions from '../../components/Trash/TrashContextActions.vue'
 
 export default defineComponent({
   name: 'TrashOverview',
   components: {
+    TrashContextActions,
     ResourceTable,
     FileSideBar,
     FilesViewWrapper,

packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap

@@ -24,25 +24,28 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Name</span> <span class="oc-icon oc-icon-s oc-p-xs oc-rounded"><!----></span>
               </button></th>
-            <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-indicators oc-pr-m" style="top: 0px;">
+            <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-indicators" style="top: 0px;">
               <div><span class="oc-table-thead-content header-text">Status</span></div>
             </th>
+            <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-actions oc-pr-m" style="top: 0px;">
+              <div><span class="oc-table-thead-content header-text">Actions</span></div>
+            </th>
           </tr>
         </thead>
         <tbody class="has-item-context-menu">
           <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="2"><span class="shimmer"></span></td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer"></span></td>
           </tr>
           <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false">
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="2"><span class="shimmer"></span></td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer"></span></td>
           </tr>
           <tr class="oc-tbody-tr oc-tbody-tr-3" data-item-id="3" draggable="false">
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="2"><span class="shimmer"></span></td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer"></span></td>
           </tr>
         </tbody>
         <tfoot class="oc-table-footer">
           <tr class="oc-table-footer-row">
-            <td colspan="2" class="oc-table-footer-cell">
+            <td colspan="3" class="oc-table-footer-cell">
               <!-- @slot Footer of the table -->
               <!-- @slot Footer of the files table -->
               <div class="oc-text-center oc-width-1-1 oc-my-s">

packages/web-pkg/src/components/FilesList/ResourceTable.vue

@@ -237,7 +237,7 @@
       </oc-button>
     </template>
     <template #actions="{ item }">
-      <div v-if="!isResourceDisabled(item)" class="resource-table-actions">
+      <div v-if="showContextDrop(item)" class="resource-table-actions">
         <!-- @slot Add quick actions before the `context-menu / three dot` button in the actions column -->
         <slot name="quickActions" :resource="item" />
         <context-menu-quick-action
@@ -290,6 +290,7 @@ import {
   FolderViewModeConstants,
   routeToContextQuery,
   SortDir,
+  useActiveLocation,
   useAuthStore,
   useCanBeOpenedWithSecureView,
   useCapabilityStore,
@@ -323,7 +324,7 @@ import { useResourceRouteResolver } from '../../composables/filesList/useResourc
 import { ClipboardActions } from '../../helpers/clipboardActions'
 import { determineResourceTableSortFields } from '../../helpers/ui/resourceTable'
 import { useFileActionsRename } from '../../composables/actions'
-import { createLocationCommon } from '../../router'
+import { createLocationCommon, isLocationTrashActive } from '../../router'
 import get from 'lodash-es/get'
 import { storeToRefs } from 'pinia'
 import { OcButton, OcSpinner, OcTable } from '@opencloud-eu/design-system/components'
@@ -593,6 +594,8 @@ export default defineComponent({
       () => capabilityStore.filesTags && width.value >= TAGS_MINIMUM_SCREEN_WIDTH
     )
 
+    const isTrashOverviewRoute = useActiveLocation(isLocationTrashActive, 'files-trash-overview')
+
     const { actions: renameActions } = useFileActionsRename()
     const { actions: renameActionsSpace } = useSpaceActionsRename()
     const renameHandler = computed(() => unref(renameActions)[0].handler)
@@ -674,6 +677,14 @@ export default defineComponent({
       return unref(deleteQueue).includes(id)
     }
 
+    const showContextDrop = (item: Resource | SpaceResource) => {
+      if (unref(isTrashOverviewRoute) && isProjectSpaceResource(item) && item.disabled) {
+        return false
+      }
+
+      return !isResourceDisabled(item)
+    }
+
     return {
       router,
       configOptions,
@@ -713,7 +724,8 @@ export default defineComponent({
       getResourceLink,
       isSticky,
       isResourceInDeleteQueue,
-      ShareTypes
+      ShareTypes,
+      showContextDrop
     }
   },
   data() {

packages/web-pkg/src/composables/actions/spaces/useSpaceActionsNavigateToTrash.ts

@@ -2,10 +2,13 @@ import { computed } from 'vue'
 import { SpaceAction } from '../types'
 import { useGettext } from 'vue3-gettext'
 import { useRouter } from '../../router'
-import { SpaceResource } from '@opencloud-eu/web-client'
+import {
+  isPersonalSpaceResource,
+  isProjectSpaceResource,
+  SpaceResource
+} from '@opencloud-eu/web-client'
 import { createLocationTrash } from '../../../router'
 import { createFileRouteOptions } from '../../../helpers'
-import { isProjectSpaceResource } from '@opencloud-eu/web-client'
 
 export const useSpaceActionsNavigateToTrash = () => {
   const router = useRouter()
@@ -21,7 +24,7 @@ export const useSpaceActionsNavigateToTrash = () => {
     {
       name: 'navigateToTrash',
       icon: 'delete-bin',
-      label: () => $gettext('Show deleted files'),
+      label: () => $gettext('Open Deleted files'),
       handler: ({ resources }) => {
         router.push(getTrashLink(resources[0]))
       },
@@ -30,7 +33,7 @@ export const useSpaceActionsNavigateToTrash = () => {
           return false
         }
 
-        if (!isProjectSpaceResource(resources[0])) {
+        if (!isProjectSpaceResource(resources[0]) && !isPersonalSpaceResource(resources[0])) {
           return false
         }
 

packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsNavigateToTrash.spec.ts

@@ -2,11 +2,11 @@ import { useSpaceActionsNavigateToTrash } from '../../../../../src'
 import { mock } from 'vitest-mock-extended'
 import {
   defaultComponentMocks,
-  RouteLocation,
-  getComposableWrapper
+  getComposableWrapper,
+  RouteLocation
 } from '@opencloud-eu/web-test-helpers'
 import { unref } from 'vue'
-import { SpaceResource } from '@opencloud-eu/web-client'
+import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 
 describe('navigateToSpace', () => {
   describe('isVisible property', () => {
@@ -17,6 +17,17 @@ describe('navigateToSpace', () => {
         }
       })
     })
+    it('should be false when the resource is not a space resource', () => {
+      getWrapper({
+        setup: ({ actions }) => {
+          expect(
+            unref(actions)[0].isVisible({
+              resources: [mock<Resource>() as any]
+            })
+          ).toBe(false)
+        }
+      })
+    })
     it('should be false when the space is disabled', () => {
       getWrapper({
         setup: ({ actions }) => {
@@ -33,7 +44,7 @@ describe('navigateToSpace', () => {
         }
       })
     })
-    it('should be false when the space is no project space', () => {
+    it('should be true when the space is personal space', () => {
       getWrapper({
         setup: ({ actions }) => {
           expect(
@@ -45,7 +56,23 @@ describe('navigateToSpace', () => {
                 })
               ]
             })
-          ).toBe(false)
+          ).toBe(true)
+        }
+      })
+    })
+    it('should be true when the space is project space', () => {
+      getWrapper({
+        setup: ({ actions }) => {
+          expect(
+            unref(actions)[0].isVisible({
+              resources: [
+                mock<SpaceResource>({
+                  disabled: false,
+                  driveType: 'project'
+                })
+              ]
+            })
+          ).toBe(true)
         }
       })
     })