feat: show empty trash bin icon at quick action if trash is empty

packages/web-app-admin-settings/src/views/Groups.vue

@@ -23,7 +23,7 @@
             appearance="filled"
             @click="createGroupAction.handler()"
           >
-            <oc-icon :name="createGroupAction.icon" />
+            <oc-icon :name="createGroupActionIcon" />
             <span v-if="!limitedScreenSpace" v-text="createGroupAction.label()" />
           </oc-button>
         </div>
@@ -103,6 +103,10 @@ export default defineComponent({
 
     const { actions: createGroupActions } = useGroupActionsCreateGroup()
     const createGroupAction = computed(() => unref(createGroupActions)[0])
+    const createGroupActionIcon = computed(() => {
+      const action = unref(createGroupAction)
+      return typeof action.icon === 'function' ? action.icon() : action.icon
+    })
 
     const loadResourcesTask = useTask(function* (signal) {
       const loadedGroups = yield* call(
@@ -187,6 +191,7 @@ export default defineComponent({
       sideBarAvailablePanels,
       sideBarPanelContext,
       createGroupAction,
+      createGroupActionIcon,
       groupSettingsStore,
       isLoading
     }

packages/web-app-admin-settings/src/views/Users.vue

@@ -24,7 +24,7 @@
             appearance="filled"
             @click="createUserAction.handler()"
           >
-            <oc-icon :name="createUserAction.icon" />
+            <oc-icon :name="createUserActionIcon" />
             <span v-if="!limitedScreenSpace" v-text="createUserAction.label()" />
           </oc-button>
         </div>
@@ -210,6 +210,10 @@ export default defineComponent({
 
     const { actions: createUserActions } = useUserActionsCreateUser()
     const createUserAction = computed(() => unref(createUserActions)[0])
+    const createUserActionIcon = computed(() => {
+      const action = unref(createUserAction)
+      return typeof action.icon === 'function' ? action.icon() : action.icon
+    })
 
     const { actions: deleteActions } = useUserActionsDelete()
     const { actions: removeFromGroupsActions } = useUserActionsRemoveFromGroups({
@@ -501,6 +505,7 @@ export default defineComponent({
       sideBarPanelContext,
       sideBarAvailablePanels,
       createUserAction,
+      createUserActionIcon,
       userSettingsStore
     }
   },

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -156,7 +156,7 @@
             :disabled="isActionDisabled(action)"
             @click="action.handler"
           >
-            <oc-icon :name="action.icon" fill-type="line" />
+            <oc-icon :name="getActionIcon(action)" fill-type="line" />
             <span v-text="action.label()"
           /></oc-button>
         </li>
@@ -314,6 +314,12 @@ const isActionDisabled = (action: Action) => {
   return action.isDisabled ? action.isDisabled() : false
 }
 
+const getActionIcon = (action: Action) => {
+  return typeof action.icon === 'function'
+    ? action.icon({ space: unref(computedSpace) })
+    : action.icon
+}
+
 useEventListener(document, 'paste', (event: ClipboardEvent) => {
   // Ignore file in clipboard if there are already files from OpenCloud in the clipboard
   if (unref(clipboardResources).length || !unref(canUpload)) {

packages/web-app-files/src/components/FilesList/QuickActions.vue

@@ -10,14 +10,14 @@
       :class="`files-quick-action-${action.name}`"
       @click="(e: MouseEvent) => action.handler({ space, resources: [item], event: e })"
     >
-      <oc-icon :name="action.icon" fill-type="line" />
+      <oc-icon :name="getIconFromAction(action)" fill-type="line" />
     </oc-button>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useEmbedMode, useExtensionRegistry } from '@opencloud-eu/web-pkg'
+import { Action, useEmbedMode, useExtensionRegistry } from '@opencloud-eu/web-pkg'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { unref } from 'vue'
 import { quickActionsExtensionPoint } from '../../extensionPoints'
@@ -45,7 +45,14 @@ export default defineComponent({
         .filter(({ isVisible }) => isVisible({ space: props.space, resources: [props.item] }))
     })
 
+    const getIconFromAction = (action: Action) => {
+      return typeof action.icon === 'function'
+        ? action.icon({ space: props.space, resources: [props.item] })
+        : action.icon
+    }
+
     return {
+      getIconFromAction,
       filteredActions,
       isEmbedModeEnabled
     }

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

@@ -11,14 +11,14 @@
       :disabled="action.isDisabled({ resources: [space] })"
       @click="action.handler({ resources: [space] })"
     >
-      <oc-icon :name="action.icon" fill-type="line" />
+      <oc-icon :name="getActionIcon(action)" fill-type="line" />
     </oc-button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, unref } from 'vue'
-import { useEmbedMode, useExtensionRegistry } from '@opencloud-eu/web-pkg'
+import { Action, useEmbedMode, useExtensionRegistry } from '@opencloud-eu/web-pkg'
 import { SpaceResource } from '@opencloud-eu/web-client'
 import { trashQuickActionsExtensionPoint } from '../../extensionPoints'
 
@@ -35,4 +35,8 @@ const filteredActions = computed(() => {
     .map((e) => e.action)
     .filter(({ isVisible }) => isVisible({ resources: [props.space] }))
 })
+
+const getActionIcon = (action: Action) => {
+  return typeof action.icon === 'function' ? action.icon({ resources: [props.space] }) : action.icon
+}
 </script>

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

@@ -19,7 +19,7 @@
             class="mr-2"
             @click="emptyTrashBinAction.handler({ resources: [space] })"
           >
-            <oc-icon :name="emptyTrashBinAction.icon" size="medium" />
+            <oc-icon :name="emptyTrashBinActionIcon" size="medium" />
             {{ emptyTrashBinAction.label() }}
           </oc-button>
         </template>
@@ -136,6 +136,10 @@ const isEmpty = computed(() => unref(resourcesViewDefaults.paginatedResources).l
 
 const { actions: emptyTrashBinActions } = useFileActionsEmptyTrashBin()
 const emptyTrashBinAction = computed(() => unref(emptyTrashBinActions)[0])
+const emptyTrashBinActionIcon = computed(() => {
+  const action = unref(emptyTrashBinAction)
+  return typeof action.icon === 'function' ? action.icon({ resources: [props.space] }) : action.icon
+})
 
 const breadcrumbs = computed(() => {
   let currentNodeName = props.space?.name

packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue

@@ -25,14 +25,14 @@
       <oc-image
         v-else-if="hasExternalImageIcon"
         data-testid="action-img"
-        :src="action.icon"
+        :src="actionIcon"
         alt=""
         class="oc-icon oc-icon-m"
       />
       <oc-icon
-        v-else-if="action.icon"
+        v-else-if="actionIcon"
         data-testid="action-icon"
-        :name="action.icon"
+        :name="actionIcon"
         :fill-type="action.iconFillType || 'line'"
         :size="size"
       />
@@ -137,14 +137,21 @@ export default defineComponent({
       }
     })
 
+    const actionIcon = computed(() => {
+      return typeof props.action.icon === 'function'
+        ? props.action.icon(props.actionOptions)
+        : props.action.icon
+    })
+
     return {
       componentType,
-      componentProps
+      componentProps,
+      actionIcon
     }
   },
   computed: {
     hasExternalImageIcon() {
-      return this.action.icon && /^https?:\/\//i.test(this.action.icon)
+      return this.actionIcon && /^https?:\/\//i.test(this.actionIcon)
     },
     componentListeners() {
       if (typeof this.action.handler !== 'function') {

packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts

@@ -59,7 +59,9 @@ export const useFileActionsEmptyTrashBin = () => {
   const actions = computed((): SpaceAction[] => [
     {
       name: 'empty-trash-bin',
-      icon: 'delete-bin-2',
+      icon: ({ resources }: SpaceActionOptions) => {
+        return resources[0]?.hasTrashedItems ? 'delete-bin-2' : 'delete-bin-7'
+      },
       label: () => $gettext('Empty trash bin'),
       handler,
       isVisible: ({ resources }) => {

packages/web-pkg/src/composables/actions/types.ts

@@ -10,7 +10,7 @@ export type ActionOptions = Record<string, unknown | unknown[]>
 export interface Action<T = ActionOptions> {
   name: string
   category?: StringUnionOrAnyString<'context' | 'share' | 'actions' | 'sidebar'>
-  icon: string
+  icon: string | ((options?: ActionOptions) => string)
   iconFillType?: IconFillType
   appearance?: AppearanceType
   id?: string