From f5f775d24f3ecd5e85480f406e82f87eb45f3566 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Mon, 23 Oct 2023 11:02:14 +0200
Subject: [PATCH 1/5] feat: add actions into the embed mode

---
 .../unreleased/enhancement-embed-mode-actions |   6 +
 docs/embed-mode/_index.md                     |  31 ++++
 .../components/EmbedActions/EmbedActions.vue  | 142 +++++++++++++++
 .../src/components/FilesViewWrapper.vue       |  14 +-
 .../EmbedActions/EmbedActions.spec.ts         | 167 ++++++++++++++++++
 5 files changed, 359 insertions(+), 1 deletion(-)
 create mode 100644 changelog/unreleased/enhancement-embed-mode-actions
 create mode 100644 docs/embed-mode/_index.md
 create mode 100644 packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
 create mode 100644 packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts

diff --git a/changelog/unreleased/enhancement-embed-mode-actions b/changelog/unreleased/enhancement-embed-mode-actions
new file mode 100644
index 00000000000..a620b9cf9ee
--- /dev/null
+++ b/changelog/unreleased/enhancement-embed-mode-actions
@@ -0,0 +1,6 @@
+Enhancement: Add embed mode actions
+
+We've added three new actions available in the embed mode. These actions are "Share", "Select" and "Share". They are emitting events with an optional payload. For more information, check the documentation.
+
+https://github.com/owncloud/web/pull/9841
+https://github.com/owncloud/web/issues/9768
diff --git a/docs/embed-mode/_index.md b/docs/embed-mode/_index.md
new file mode 100644
index 00000000000..b443b085854
--- /dev/null
+++ b/docs/embed-mode/_index.md
@@ -0,0 +1,31 @@
+---
+title: 'Embed Mode'
+date: 2023-10-23T00:00:00+00:00
+weight: 60
+geekdocRepo: https://github.com/owncloud/web
+geekdocEditPath: edit/master/docs/embed-mode
+geekdocFilePath: _index.md
+geekdocCollapseSection: true
+---
+
+{{< toc >}}
+
+The ownCloud Web can be consumed by another application in a stripped down version called "Embed mode". This mode is supposed to be used in the context of selecting or sharing resources. If you're looking for even more minimalistic approach, you can take a look at the [File picker](https://owncloud.dev/integration/file_picker/).
+
+## Getting started
+
+To integrate ownCloud Web into your application, add an iframe element pointing to your ownCloud Web deployed instance with additional query parameter `mode=embed`.
+
+```html
+<iframe src="<web-url>?mode=embed"></iframe>
+```
+
+## Events
+
+The app is emitting various events depending on the goal of the user. All events are prefixed with `owncloud-embed:` to prevent any naming conflicts with other events.
+
+| Event name | Payload | Description |
+| --- | --- | --- |
+| **owncloud-embed:select** | Resource[] | Gets emitted when user selects resources via the "Attach as copy" action |
+| **owncloud-embed:share** | string[] | Gets emitted when user selects resources and shares them via the "Share links" action |
+| **owncloud-embed:cancel** | void | Gets emitted when user attempts to close the embedded instance via "Cancel" action |
diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
new file mode 100644
index 00000000000..502e69b43d5
--- /dev/null
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -0,0 +1,142 @@
+<template>
+  <section class="files-embed-actions">
+    <oc-button data-testid="button-cancel" appearance="raw-inverse" @click="emitCancel">{{
+      $gettext('Cancel')
+    }}</oc-button>
+    <oc-button
+      data-testid="button-share"
+      variation="inverse"
+      appearance="filled"
+      :disabled="areSelectActionsDisabled || !canCreatePublicLinks"
+      @click="sharePublicLinks"
+      >{{ $gettext('Share links') }}</oc-button
+    >
+    <oc-button
+      data-testid="button-select"
+      variation="inverse"
+      appearance="filled"
+      :disabled="areSelectActionsDisabled"
+      @click="emitSelect"
+      >{{ $gettext('Attach as copy') }}</oc-button
+    >
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  createQuicklink,
+  showQuickLinkPasswordModal,
+  useAbility,
+  useClientService,
+  usePasswordPolicyService,
+  useStore
+} from '@ownclouders/web-pkg'
+import { Resource } from '@ownclouders/web-client'
+import { useGettext } from 'vue3-gettext'
+
+const store = useStore()
+const ability = useAbility()
+const clientService = useClientService()
+const passwordPolicyService = usePasswordPolicyService()
+const language = useGettext()
+
+const selectedFiles = computed<Resource[]>(() => {
+  return store.getters['Files/selectedFiles']
+})
+
+const areSelectActionsDisabled = computed<boolean>(() => selectedFiles.value.length < 1)
+
+const canCreatePublicLinks = computed<boolean>(() => ability.can('create-all', 'PublicLink'))
+
+const emitSelect = (): void => {
+  const event: CustomEvent<Resource[]> = new CustomEvent('owncloud-embed:select', {
+    detail: selectedFiles.value
+  })
+
+  window.parent.dispatchEvent(event)
+}
+
+const emitCancel = (): void => {
+  const event: CustomEvent<void> = new CustomEvent('owncloud-embed:cancel')
+
+  window.parent.dispatchEvent(event)
+}
+
+const emitShare = (links: string[]): void => {
+  if (!canCreatePublicLinks.value) return
+
+  const event: CustomEvent<string[]> = new CustomEvent('owncloud-embed:share', {
+    detail: links
+  })
+
+  window.parent.dispatchEvent(event)
+}
+
+const sharePublicLinks = async (): Promise<string[]> => {
+  if (!canCreatePublicLinks.value) return
+
+  try {
+    const passwordEnforced: boolean =
+      store.getters.capabilities?.files_sharing?.public?.password?.enforced_for?.read_only === true
+
+    if (passwordEnforced) {
+      showQuickLinkPasswordModal(
+        { store, $gettext: language.$gettext, passwordPolicyService },
+        async (password) => {
+          const links: string[] = await Promise.all(
+            selectedFiles.value.map(
+              async (resource) =>
+                (
+                  await createQuicklink({
+                    ability,
+                    resource,
+                    clientService,
+                    language,
+                    store,
+                    password
+                  })
+                ).url
+            )
+          )
+
+          emitShare(links)
+        }
+      )
+
+      return
+    }
+
+    const links: string[] = await Promise.all(
+      selectedFiles.value.map(
+        async (resource) =>
+          (
+            await createQuicklink({ ability, resource, clientService, language, store })
+          ).url
+      )
+    )
+
+    emitShare(links)
+  } catch (error) {
+    console.error(error)
+    store.dispatch('showErrorMessage', {
+      title: language.$gettext('Sharing links failed...'),
+      error
+    })
+  }
+}
+</script>
+
+<style scoped>
+.files-embed-actions {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--oc-space-medium);
+  justify-content: flex-end;
+  padding: var(--oc-space-medium) 0;
+  padding-right: var(--oc-space-small);
+  width: 100%;
+}
+</style>
diff --git a/packages/web-app-files/src/components/FilesViewWrapper.vue b/packages/web-app-files/src/components/FilesViewWrapper.vue
index ffb6b7ce7c7..18b6ecbc7eb 100644
--- a/packages/web-app-files/src/components/FilesViewWrapper.vue
+++ b/packages/web-app-files/src/components/FilesViewWrapper.vue
@@ -4,13 +4,25 @@
       <slot />
     </div>
   </div>
+
+  <portal v-if="isEmbedModeEnabled" to="app.runtime.footer">
+    <embed-actions />
+  </portal>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { useEmbedMode } from '@ownclouders/web-pkg'
+import EmbedActions from './EmbedActions/EmbedActions.vue'
 
 export default defineComponent({
-  inheritAttrs: false
+  components: { EmbedActions },
+  inheritAttrs: false,
+  setup() {
+    const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
+
+    return { isEmbedModeEnabled }
+  }
 })
 </script>
 
diff --git a/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
new file mode 100644
index 00000000000..006dffe4270
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
@@ -0,0 +1,167 @@
+import {
+  createStore,
+  defaultPlugins,
+  defaultStoreMockOptions,
+  shallowMount
+} from 'web-test-helpers'
+import EmbedActions from 'web-app-files/src/components/EmbedActions/EmbedActions.vue'
+
+jest.mock('@ownclouders/web-pkg', () => ({
+  ...jest.requireActual('@ownclouders/web-pkg'),
+  createQuicklink: jest.fn().mockImplementation(({ resource, password }) => ({
+    url: (password ? password + '-' : '') + 'link-' + resource.id
+  })),
+  showQuickLinkPasswordModal: jest.fn().mockImplementation((_options, cb) => cb('password'))
+}))
+
+const selectors = Object.freeze({
+  btnSelect: '[data-testid="button-select"]',
+  btnCancel: '[data-testid="button-cancel"]',
+  btnShare: '[data-testid="button-share"]'
+})
+
+describe('EmbedActions', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('select action', () => {
+    it('should disable select action when no resources are selected', () => {
+      const { wrapper } = getWrapper()
+
+      expect(wrapper.find(selectors.btnSelect).attributes()).toHaveProperty('disabled')
+    })
+
+    it('should enable select action when at least one resource is selected', () => {
+      const { wrapper } = getWrapper({ selectedFiles: [{ id: 1 }] })
+
+      expect(wrapper.find(selectors.btnSelect).attributes()).not.toHaveProperty('disabled')
+    })
+
+    it('should emit select event when the select action is triggered', async () => {
+      window.parent.dispatchEvent = jest.fn()
+      global.CustomEvent = jest.fn().mockImplementation(mockCustomEvent)
+
+      const { wrapper } = getWrapper({ selectedFiles: [{ id: 1 }] })
+
+      await wrapper.find(selectors.btnSelect).trigger('click')
+
+      expect(window.parent.dispatchEvent).toHaveBeenCalledWith({
+        name: 'owncloud-embed:select',
+        payload: { detail: [{ id: 1 }] }
+      })
+    })
+  })
+
+  describe('cancel action', () => {
+    it('should emit cancel event when the cancel action is triggered', async () => {
+      window.parent.dispatchEvent = jest.fn()
+      global.CustomEvent = jest.fn().mockImplementation(mockCustomEvent)
+
+      const { wrapper } = getWrapper({ selectedFiles: [{ id: 1 }] })
+
+      await wrapper.find(selectors.btnCancel).trigger('click')
+
+      expect(window.parent.dispatchEvent).toHaveBeenCalledWith({
+        name: 'owncloud-embed:cancel',
+        payload: undefined
+      })
+    })
+  })
+
+  describe('share action', () => {
+    it('should disable share action when link creation is disabled', () => {
+      const { wrapper } = getWrapper({ selectedFiles: [{ id: 1 }] })
+
+      expect(wrapper.find(selectors.btnShare).attributes()).toHaveProperty('disabled')
+    })
+
+    it('should disable share action when no resources are selected', () => {
+      const { wrapper } = getWrapper()
+
+      expect(wrapper.find(selectors.btnShare).attributes()).toHaveProperty('disabled')
+    })
+
+    it('should enable share action when at least one resource is selected and link creation is enabled', () => {
+      const { wrapper } = getWrapper({
+        selectedFiles: [{ id: 1 }],
+        abilities: [{ action: 'create-all', subject: 'PublicLink' }]
+      })
+
+      expect(wrapper.find(selectors.btnShare).attributes()).not.toHaveProperty('disabled')
+    })
+
+    it('should emit share event when share action is triggered', async () => {
+      window.parent.dispatchEvent = jest.fn()
+      global.CustomEvent = jest.fn().mockImplementation(mockCustomEvent)
+
+      const { wrapper } = getWrapper({
+        selectedFiles: [{ id: 1 }],
+        abilities: [{ action: 'create-all', subject: 'PublicLink' }]
+      })
+
+      await wrapper.find(selectors.btnShare).trigger('click')
+
+      expect(window.parent.dispatchEvent).toHaveBeenCalledWith({
+        name: 'owncloud-embed:share',
+        payload: { detail: ['link-1'] }
+      })
+    })
+
+    it('should ask for password first when required when share action is triggered', async () => {
+      window.parent.dispatchEvent = jest.fn()
+      global.CustomEvent = jest.fn().mockImplementation(mockCustomEvent)
+
+      const { wrapper } = getWrapper({
+        selectedFiles: [{ id: 1 }],
+        abilities: [{ action: 'create-all', subject: 'PublicLink' }],
+        capabilities: jest.fn().mockReturnValue({
+          files_sharing: { public: { password: { enforced_for: { read_only: true } } } }
+        })
+      })
+
+      await wrapper.find(selectors.btnShare).trigger('click')
+
+      expect(window.parent.dispatchEvent).toHaveBeenCalledWith({
+        name: 'owncloud-embed:share',
+        payload: { detail: ['password-link-1'] }
+      })
+    })
+  })
+})
+
+function getWrapper(
+  { selectedFiles = [], abilities = [], capabilities = jest.fn().mockReturnValue({}) } = {
+    selectedFiles: [],
+    abilities: [],
+    capabilities: jest.fn().mockReturnValue({})
+  }
+) {
+  const storeOptions = {
+    ...defaultStoreMockOptions,
+    getters: { ...defaultStoreMockOptions.getters, capabilities },
+    modules: {
+      ...defaultStoreMockOptions.modules,
+      Files: {
+        ...defaultStoreMockOptions.modules.Files,
+        getters: {
+          ...defaultStoreMockOptions.modules.Files.getters,
+          selectedFiles: jest.fn().mockReturnValue(selectedFiles)
+        }
+      }
+    }
+  }
+
+  return {
+    wrapper: shallowMount(EmbedActions, {
+      global: {
+        stubs: { OcButton: false },
+        plugins: [...defaultPlugins({ abilities }), createStore(storeOptions)]
+      }
+    })
+  }
+}
+
+function mockCustomEvent(name, payload) {
+  return { name, payload }
+}

From 759443517989521cc5ce23d58ee2a51f4a501c21 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Mon, 23 Oct 2023 11:43:31 +0200
Subject: [PATCH 2/5] test: update snapshots

---
 .../tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap  | 1 +
 .../tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index b31f621654f..16884651ef3 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -20,6 +20,7 @@ exports[`Projects view different files view states lists all available project s
       </div>
     </div>
   </div>
+  <!--v-if-->
   <side-bar-stub open="false"></side-bar-stub>
 </div>
 `;
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 e3aa48b67b2..e509c05723e 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
@@ -81,5 +81,6 @@ exports[`TrashOverview view states should render spaces list 1`] = `
       </table>
     </div>
   </div>
+  <!--v-if-->
 </div>
 `;

From 86593848043a0c04f827c031b2e73b9d13884eed Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Tue, 24 Oct 2023 10:27:42 +0200
Subject: [PATCH 3/5] test: stub out portal

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

diff --git a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
index 8b27e6c5c8c..f151778ae41 100644
--- a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
@@ -264,7 +264,7 @@ function getMountedWrapper({
         plugins: [...defaultPlugins(), store],
         mocks: defaultMocks,
         provide: defaultMocks,
-        stubs: { ...defaultStubs, 'resource-details': true }
+        stubs: { ...defaultStubs, 'resource-details': true, portal: true }
       }
     })
   }

From 46db7cee85e375fd334f272f0ef0cdc322bbc7c4 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Tue, 24 Oct 2023 10:34:38 +0200
Subject: [PATCH 4/5] refactor: use setup function for consistency

---
 .../components/EmbedActions/EmbedActions.vue  | 157 ++++++++++--------
 1 file changed, 85 insertions(+), 72 deletions(-)

diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
index 502e69b43d5..556f925a5c2 100644
--- a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -22,7 +22,7 @@
   </section>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import { computed } from 'vue'
 import {
   createQuicklink,
@@ -35,94 +35,107 @@ import {
 import { Resource } from '@ownclouders/web-client'
 import { useGettext } from 'vue3-gettext'
 
-const store = useStore()
-const ability = useAbility()
-const clientService = useClientService()
-const passwordPolicyService = usePasswordPolicyService()
-const language = useGettext()
+export default {
+  setup() {
+    const store = useStore()
+    const ability = useAbility()
+    const clientService = useClientService()
+    const passwordPolicyService = usePasswordPolicyService()
+    const language = useGettext()
 
-const selectedFiles = computed<Resource[]>(() => {
-  return store.getters['Files/selectedFiles']
-})
+    const selectedFiles = computed<Resource[]>(() => {
+      return store.getters['Files/selectedFiles']
+    })
 
-const areSelectActionsDisabled = computed<boolean>(() => selectedFiles.value.length < 1)
+    const areSelectActionsDisabled = computed<boolean>(() => selectedFiles.value.length < 1)
 
-const canCreatePublicLinks = computed<boolean>(() => ability.can('create-all', 'PublicLink'))
+    const canCreatePublicLinks = computed<boolean>(() => ability.can('create-all', 'PublicLink'))
 
-const emitSelect = (): void => {
-  const event: CustomEvent<Resource[]> = new CustomEvent('owncloud-embed:select', {
-    detail: selectedFiles.value
-  })
+    const emitSelect = (): void => {
+      const event: CustomEvent<Resource[]> = new CustomEvent('owncloud-embed:select', {
+        detail: selectedFiles.value
+      })
 
-  window.parent.dispatchEvent(event)
-}
+      window.parent.dispatchEvent(event)
+    }
 
-const emitCancel = (): void => {
-  const event: CustomEvent<void> = new CustomEvent('owncloud-embed:cancel')
+    const emitCancel = (): void => {
+      const event: CustomEvent<void> = new CustomEvent('owncloud-embed:cancel')
 
-  window.parent.dispatchEvent(event)
-}
+      window.parent.dispatchEvent(event)
+    }
 
-const emitShare = (links: string[]): void => {
-  if (!canCreatePublicLinks.value) return
+    const emitShare = (links: string[]): void => {
+      if (!canCreatePublicLinks.value) return
 
-  const event: CustomEvent<string[]> = new CustomEvent('owncloud-embed:share', {
-    detail: links
-  })
+      const event: CustomEvent<string[]> = new CustomEvent('owncloud-embed:share', {
+        detail: links
+      })
 
-  window.parent.dispatchEvent(event)
-}
+      window.parent.dispatchEvent(event)
+    }
 
-const sharePublicLinks = async (): Promise<string[]> => {
-  if (!canCreatePublicLinks.value) return
-
-  try {
-    const passwordEnforced: boolean =
-      store.getters.capabilities?.files_sharing?.public?.password?.enforced_for?.read_only === true
-
-    if (passwordEnforced) {
-      showQuickLinkPasswordModal(
-        { store, $gettext: language.$gettext, passwordPolicyService },
-        async (password) => {
-          const links: string[] = await Promise.all(
-            selectedFiles.value.map(
-              async (resource) =>
-                (
-                  await createQuicklink({
-                    ability,
-                    resource,
-                    clientService,
-                    language,
-                    store,
-                    password
-                  })
-                ).url
-            )
+    const sharePublicLinks = async (): Promise<string[]> => {
+      if (!canCreatePublicLinks.value) return
+
+      try {
+        const passwordEnforced: boolean =
+          store.getters.capabilities?.files_sharing?.public?.password?.enforced_for?.read_only ===
+          true
+
+        if (passwordEnforced) {
+          showQuickLinkPasswordModal(
+            { store, $gettext: language.$gettext, passwordPolicyService },
+            async (password) => {
+              const links: string[] = await Promise.all(
+                selectedFiles.value.map(
+                  async (resource) =>
+                    (
+                      await createQuicklink({
+                        ability,
+                        resource,
+                        clientService,
+                        language,
+                        store,
+                        password
+                      })
+                    ).url
+                )
+              )
+
+              emitShare(links)
+            }
           )
 
-          emitShare(links)
+          return
         }
-      )
 
-      return
+        const links: string[] = await Promise.all(
+          selectedFiles.value.map(
+            async (resource) =>
+              (
+                await createQuicklink({ ability, resource, clientService, language, store })
+              ).url
+          )
+        )
+
+        emitShare(links)
+      } catch (error) {
+        console.error(error)
+        store.dispatch('showErrorMessage', {
+          title: language.$gettext('Sharing links failed...'),
+          error
+        })
+      }
     }
 
-    const links: string[] = await Promise.all(
-      selectedFiles.value.map(
-        async (resource) =>
-          (
-            await createQuicklink({ ability, resource, clientService, language, store })
-          ).url
-      )
-    )
-
-    emitShare(links)
-  } catch (error) {
-    console.error(error)
-    store.dispatch('showErrorMessage', {
-      title: language.$gettext('Sharing links failed...'),
-      error
-    })
+    return {
+      areSelectActionsDisabled,
+      canCreatePublicLinks,
+      sharePublicLinks,
+      emitCancel,
+      emitSelect
+    }
   }
 }
 </script>

From 3580eeb7a7717eb639b5e161003f275666d1cd2a Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Tue, 24 Oct 2023 12:54:58 +0200
Subject: [PATCH 5/5] test: stub portal also in generictrash tests

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

diff --git a/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts b/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
index ff665488e34..d4d0e7be383 100644
--- a/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
@@ -84,7 +84,7 @@ function getMountedWrapper({ mocks = {}, props = {}, files = [], loading = false
       global: {
         plugins: [...defaultPlugins(), store],
         mocks: defaultMocks,
-        stubs: defaultStubs
+        stubs: { ...defaultStubs, portal: true }
       }
     })
   }