Refactor EmbedActions component to conditionally post messages based on embed mode. Update tests to ensure correct message posting behavior and add checks for file selection in embed mode.

Author: Gerry-Cern

packages/web-app-files/src/components/EmbedActions/EmbedActions.vue

@@ -152,10 +152,10 @@ export default defineComponent({
               JSON.stringify(routeToContextQuery(unref(router.currentRoute)))
             )
           })
+        } else {
+          // TODO: adjust type to embedModeLocationPickMessageData later (breaking)
+          postMessage<Resource[]>('owncloud-embed:select', resources)
         }
-
-        // TODO: adjust type to embedModeLocationPickMessageData later (breaking)
-        postMessage<Resource[]>('owncloud-embed:select', resources)
       } finally {
         signing.value = false
       }

packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts

@@ -9,6 +9,7 @@ import { FileAction, useEmbedMode, useFileActionsCreateLink } from '@ownclouders
 import { mock } from 'vitest-mock-extended'
 import { ref } from 'vue'
 import { Resource } from '@ownclouders/web-client'
+import { flushPromises } from '@vue/test-utils'
 
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
@@ -46,8 +47,10 @@ describe('EmbedActions', () => {
       const { wrapper, mocks } = getWrapper({ selectedIds: ['1'] })
 
       await wrapper.find(selectors.btnSelect).trigger('click')
+      await flushPromises()
 
       expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', [{ id: '1' }])
+      expect(mocks.postMessageMock).toHaveBeenCalledTimes(1)
     })
 
     it('should enable select action when embedTarget is set to location', () => {
@@ -63,8 +66,10 @@ describe('EmbedActions', () => {
       })
 
       await wrapper.find(selectors.btnSelect).trigger('click')
+      await flushPromises()
 
       expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', [{ id: '1' }])
+      expect(mocks.postMessageMock).toHaveBeenCalledTimes(1)
     })
     it('should display the file name input when chooseFileName is configured', () => {
       const { wrapper } = getWrapper({
@@ -91,6 +96,7 @@ describe('EmbedActions', () => {
       })
 
       await wrapper.find(selectors.btnSelect).trigger('click')
+      await flushPromises()
 
       expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', {
         fileName: 'file.txt',
@@ -100,6 +106,7 @@ describe('EmbedActions', () => {
           contextRouteQuery: {}
         }
       })
+      expect(mocks.postMessageMock).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -177,6 +184,7 @@ function getWrapper(
     mock<ReturnType<typeof useEmbedMode>>({
       isLocationPicker: ref(isLocationPicker),
       isFilePicker: ref(isFilePicker),
+      isInlineAttach: ref(false),
       chooseFileName: ref(chooseFileName),
       chooseFileNameSuggestion: ref('file.txt'),
       postMessage: postMessageMock

packages/web-pkg/src/components/CreateLinkModal.vue

@@ -278,15 +278,15 @@ export default defineComponent({
           'owncloud-embed:share',
           (succeeded as PromiseFulfilledResult<LinkShare>[]).map(({ value }) => value.webUrl)
         )
+        // Always emit new event with objects, include password only when copyPassword is enabled
+        postMessage<Array<{ url: string; password?: string }>>(
+          'owncloud-embed:share-links',
+          (succeeded as PromiseFulfilledResult<LinkShare>[]).map(({ value }) => ({
+            url: value.webUrl,
+            ...(options.copyPassword && { password: password.value })
+          }))
+        )
       }
-      // Always emit new event with objects, include password only when copyPassword is enabled
-      postMessage<Array<{ url: string; password?: string }>>(
-        'owncloud-embed:share-links',
-        (succeeded as PromiseFulfilledResult<LinkShare>[]).map(({ value }) => ({
-          url: value.webUrl,
-          ...(options.copyPassword && { password: password.value })
-        }))
-      )
 
       const userFacingErrors: Error[] = []
       const failed = result.filter(({ status }) => status === 'rejected')

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

@@ -299,7 +299,7 @@ export default defineComponent({
       return action.route({ space, resources: [resource] })
     }
     const emitTileClick = (resource: Resource) => {
-      if (unref(isEmbedModeEnabled) && unref(isFilePicker)) {
+      if (unref(isEmbedModeEnabled) && unref(isFilePicker) && !resource.isFolder) {
         return postMessage<embedModeFilePickMessageData>('owncloud-embed:file-pick', {
           resource: JSON.parse(JSON.stringify(resource)),
           locationQuery: JSON.parse(JSON.stringify(routeToContextQuery(unref(router.currentRoute))))

packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts

@@ -114,7 +114,36 @@ describe('CreateLinkModal', () => {
       const { addLink } = useSharesStore()
       vi.mocked(addLink).mockResolvedValue(link)
       await wrapper.vm.onConfirm()
+      expect(mocks.postMessageMock).toHaveBeenCalledTimes(2)
       expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:share', [link.webUrl])
+      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:share-links', [
+        { url: link.webUrl }
+      ])
+    })
+    it('does not emit embed share events when not in embed mode', async () => {
+      const resources = [mock<Resource>({ isFolder: false })]
+      const { wrapper, mocks } = getWrapper({ resources, embedModeEnabled: false })
+      const link = mock<LinkShare>({ webUrl: 'someurl' })
+
+      const { addLink } = useSharesStore()
+      vi.mocked(addLink).mockResolvedValue(link)
+      await wrapper.vm.onConfirm()
+
+      expect(mocks.postMessageMock).not.toHaveBeenCalled()
+    })
+    it('includes password in share-links event when copyPassword is enabled', async () => {
+      const resources = [mock<Resource>({ isFolder: false })]
+      const { wrapper, mocks } = getWrapper({ resources, embedModeEnabled: true })
+      const link = mock<LinkShare>({ webUrl: 'someurl' })
+
+      const { addLink } = useSharesStore()
+      vi.mocked(addLink).mockResolvedValue(link)
+      wrapper.vm.password.value = 'secret'
+      await wrapper.vm.onConfirm({ copyPassword: true })
+
+      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:share-links', [
+        { url: link.webUrl, password: 'secret' }
+      ])
     })
     it('shows error messages for links that failed to be created', async () => {
       const consoleMock = vi.fn(() => undefined)

packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts

@@ -3,7 +3,7 @@ import ResourceTiles from '../../../../src/components/FilesList/ResourceTiles.vu
 import { sortFields } from '../../../../src/helpers/ui/resourceTiles'
 import { Resource, ResourceIndicator, SpaceResource } from '@ownclouders/web-client'
 import { mock } from 'vitest-mock-extended'
-import { ComponentPublicInstance, computed } from 'vue'
+import { ComponentPublicInstance, computed, ref } from 'vue'
 import { extractDomSelector } from '@ownclouders/web-client'
 import { useCanBeOpenedWithSecureView } from '../../../../src/composables/resources'
 import { displayPositionedDropdown } from '../../../../src/helpers/contextMenuDropdown'
@@ -81,6 +81,7 @@ describe('ResourceTiles component', () => {
   const originalGetElementById = document.getElementById
   const originalGetComputedStyle = window.getComputedStyle
   beforeEach(() => {
+    mockUseEmbedMode.mockReturnValue({ isEnabled: computed(() => false) })
     const mockElement = {
       clientWidth: 800
     } as HTMLElement
@@ -145,6 +146,44 @@ describe('ResourceTiles component', () => {
       await wrapper.find('.oc-tiles-item .oc-resource-name').trigger('click')
       expect(wrapper.emitted().fileClick).toBeUndefined()
     })
+
+    it('posts file-pick message when embed file picker mode is enabled and a file is clicked', async () => {
+      const postMessageMock = vi.fn()
+      mockUseEmbedMode.mockReturnValue({
+        isEnabled: ref(true),
+        isFilePicker: ref(true),
+        postMessage: postMessageMock
+      })
+      const { wrapper } = getWrapper({ props: { resources } })
+      await wrapper.find('.oc-tiles-item .oc-resource-name').trigger('click')
+
+      expect(postMessageMock).toHaveBeenCalledWith(
+        'owncloud-embed:file-pick',
+        expect.objectContaining({
+          resource: expect.objectContaining({ name: 'forest.jpg' })
+        })
+      )
+    })
+
+    it('does not post file-pick message when embed file picker mode is enabled and a folder is clicked', async () => {
+      const postMessageMock = vi.fn()
+      mockUseEmbedMode.mockReturnValue({
+        isEnabled: ref(true),
+        isFilePicker: ref(true),
+        postMessage: postMessageMock
+      })
+      const folderResource = {
+        ...resources[0],
+        id: 'folder',
+        name: 'docs',
+        isFolder: true,
+        type: 'folder'
+      }
+      const { wrapper } = getWrapper({ props: { resources: [folderResource] } })
+      await wrapper.findComponent({ name: 'resource-tile' }).trigger('click')
+
+      expect(postMessageMock).not.toHaveBeenCalled()
+    })
   })
 
   it('emits update:selectedIds event on resource selection and sets the selection', () => {

packages/web-runtime/src/container/bootstrap.ts

@@ -121,7 +121,7 @@ const getEmbedConfigFromQuery = (
 
   const delegateAuthenticationOrigin = getQueryParam('embed-delegate-authentication-origin')
 
-  if (delegateAuthentication) {
+  if (delegateAuthenticationOrigin) {
     config.delegateAuthenticationOrigin = delegateAuthenticationOrigin
   }
 

packages/web-runtime/tests/unit/container/bootstrap.spec.ts

@@ -220,6 +220,26 @@ describe('announceConfiguration', () => {
     expect(configStore.options.defaultLanguage).toStrictEqual('de')
   })
 
+  it('should set delegateAuthenticationOrigin from URL query when param is present without delegateAuthentication', async () => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        search: '?embed-delegate-authentication-origin=https://parent.test'
+      },
+      writable: true
+    })
+    vi.spyOn(global, 'fetch').mockResolvedValue(
+      mock<Response>({
+        status: 200,
+        json: () => Promise.resolve({ theme: '', server: '', options: {} })
+      })
+    )
+    const configStore = useConfigStore()
+    await announceConfiguration({ path: '/config.json', configStore })
+    expect(configStore.options.embed.delegateAuthenticationOrigin).toStrictEqual(
+      'https://parent.test'
+    )
+  })
+
   it('should fallback to navigator language as default language when lang in URL query does not match supported languages', async () => {
     Object.defineProperty(window, 'location', {
       value: {