diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile index c10ce231..972c7160 100644 --- a/src/frontend/Dockerfile +++ b/src/frontend/Dockerfile @@ -67,9 +67,6 @@ ENV NEXT_PUBLIC_Y_PROVIDER_URL=${Y_PROVIDER_URL} ARG API_ORIGIN ENV NEXT_PUBLIC_API_ORIGIN=${API_ORIGIN} -ARG MEDIA_URL -ENV NEXT_PUBLIC_MEDIA_URL=${MEDIA_URL} - ARG SW_DEACTIVATED ENV NEXT_PUBLIC_SW_DEACTIVATED=${SW_DEACTIVATED} diff --git a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts index c0a2c4c4..5e63d5a2 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts @@ -1,5 +1,9 @@ +import path from 'path'; + import { expect, test } from '@playwright/test'; +import { createDoc } from './common'; + const config = { COLLABORATION_SERVER_URL: 'ws://localhost:4444', ENVIRONMENT: 'development', @@ -77,4 +81,33 @@ test.describe('Config', () => { // alt 'Gouvernement Logo' comes from the theme await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible(); }); + + test('it checks that media server is configured from config endpoint', async ({ + page, + browserName, + }) => { + await page.goto('/'); + + await createDoc(page, 'doc-media', browserName, 1); + + const fileChooserPromise = page.waitForEvent('filechooser'); + + await page.locator('.bn-block-outer').last().fill('/'); + await page.getByText('Resizable image with caption').click(); + await page.getByText('Upload image').click(); + + const fileChooser = await fileChooserPromise; + await fileChooser.setFiles( + path.join(__dirname, 'assets/logo-suite-numerique.png'), + ); + + const image = page.getByRole('img', { name: 'logo-suite-numerique.png' }); + + await expect(image).toBeVisible(); + + // Check src of image + expect(await image.getAttribute('src')).toMatch( + /http:\/\/localhost:8083\/media\/.*\/attachments\/.*.png/, + ); + }); }); diff --git a/src/frontend/apps/impress/.env b/src/frontend/apps/impress/.env index 051e4595..afe20085 100644 --- a/src/frontend/apps/impress/.env +++ b/src/frontend/apps/impress/.env @@ -1,4 +1,3 @@ NEXT_PUBLIC_API_ORIGIN= NEXT_PUBLIC_Y_PROVIDER_URL= -NEXT_PUBLIC_MEDIA_URL= NEXT_PUBLIC_SW_DEACTIVATED= diff --git a/src/frontend/apps/impress/.env.development b/src/frontend/apps/impress/.env.development index a9d0f3d9..e174f537 100644 --- a/src/frontend/apps/impress/.env.development +++ b/src/frontend/apps/impress/.env.development @@ -1,4 +1,3 @@ NEXT_PUBLIC_API_ORIGIN=http://localhost:8071 NEXT_PUBLIC_Y_PROVIDER_URL=ws://localhost:4444 -NEXT_PUBLIC_MEDIA_URL=http://localhost:8083 NEXT_PUBLIC_SW_DEACTIVATED=true diff --git a/src/frontend/apps/impress/src/core/conf.ts b/src/frontend/apps/impress/src/core/conf.ts index 0c8bccd0..1424dfa6 100644 --- a/src/frontend/apps/impress/src/core/conf.ts +++ b/src/frontend/apps/impress/src/core/conf.ts @@ -1,7 +1,3 @@ -export const mediaUrl = () => - process.env.NEXT_PUBLIC_MEDIA_URL || - (typeof window !== 'undefined' ? window.location.origin : ''); - export const backendUrl = () => process.env.NEXT_PUBLIC_API_ORIGIN || (typeof window !== 'undefined' ? window.location.origin : ''); diff --git a/src/frontend/apps/impress/src/core/config/hooks/index.ts b/src/frontend/apps/impress/src/core/config/hooks/index.ts new file mode 100644 index 00000000..41d6d8de --- /dev/null +++ b/src/frontend/apps/impress/src/core/config/hooks/index.ts @@ -0,0 +1 @@ +export * from './useMediaUrl'; diff --git a/src/frontend/apps/impress/src/core/config/hooks/useMediaUrl.tsx b/src/frontend/apps/impress/src/core/config/hooks/useMediaUrl.tsx new file mode 100644 index 00000000..1fcb5ec5 --- /dev/null +++ b/src/frontend/apps/impress/src/core/config/hooks/useMediaUrl.tsx @@ -0,0 +1,10 @@ +import { useConfig } from '../api'; + +export const useMediaUrl = () => { + const { data: conf } = useConfig(); + + return ( + conf?.MEDIA_BASE_URL || + (typeof window !== 'undefined' ? window.location.origin : '') + ); +}; diff --git a/src/frontend/apps/impress/src/core/config/index.ts b/src/frontend/apps/impress/src/core/config/index.ts index feec091a..e786d397 100644 --- a/src/frontend/apps/impress/src/core/config/index.ts +++ b/src/frontend/apps/impress/src/core/config/index.ts @@ -1,2 +1,3 @@ -export * from './api/useConfig'; +export * from './api/'; export * from './ConfigProvider'; +export * from './hooks'; diff --git a/src/frontend/apps/impress/src/custom-next.d.ts b/src/frontend/apps/impress/src/custom-next.d.ts index ec8d7d06..9dadec0c 100644 --- a/src/frontend/apps/impress/src/custom-next.d.ts +++ b/src/frontend/apps/impress/src/custom-next.d.ts @@ -20,7 +20,6 @@ declare module '*.svg?url' { namespace NodeJS { interface ProcessEnv { NEXT_PUBLIC_API_ORIGIN?: string; - NEXT_PUBLIC_MEDIA_URL?: string; NEXT_PUBLIC_Y_PROVIDER_URL?: string; NEXT_PUBLIC_SW_DEACTIVATED?: string; } diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index d6fd9c0a..cbca2d9e 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx @@ -9,8 +9,8 @@ import React, { useCallback, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { Box, TextErrors } from '@/components'; -import { mediaUrl } from '@/core'; import { useAuthStore } from '@/core/auth'; +import { useMediaUrl } from '@/core/config'; import { Doc } from '@/features/docs/doc-management'; import { useCreateDocAttachment } from '../api/useCreateDocUpload'; @@ -92,6 +92,7 @@ export const BlockNoteEditor = ({ const isVersion = doc.id !== storeId; const { userData } = useAuthStore(); const { setEditor } = useEditorStore(); + const mediaUrl = useMediaUrl(); const readOnly = !doc.abilities.partial_update || isVersion; useSaveDoc(doc.id, provider.document, !readOnly); @@ -114,9 +115,9 @@ export const BlockNoteEditor = ({ body, }); - return `${mediaUrl()}${ret.file}`; + return `${mediaUrl}${ret.file}`; }, - [createDocAttachment, doc.id], + [createDocAttachment, doc.id, mediaUrl], ); const editor = useCreateBlockNote(