From 7d64c829878fd963c0935c465c0a349c49020273 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 15 Nov 2024 16:11:08 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20get=20media=20ur?= =?UTF-8?q?l=20from=20config=20endpoint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We centralized the configuration on the backend side, it is easier to manage and we can change the configuration without having to rebuild the frontend. We now use the config endpoint to get the media url, we refacto to remove the frontend env occurences and to adapt with the new way to get the media url. --- src/frontend/Dockerfile | 3 -- .../e2e/__tests__/app-impress/config.spec.ts | 33 +++++++++++++++++++ src/frontend/apps/impress/.env | 1 - src/frontend/apps/impress/.env.development | 1 - src/frontend/apps/impress/src/core/conf.ts | 4 --- .../impress/src/core/config/hooks/index.ts | 1 + .../src/core/config/hooks/useMediaUrl.tsx | 10 ++++++ .../apps/impress/src/core/config/index.ts | 3 +- .../apps/impress/src/custom-next.d.ts | 1 - .../doc-editor/components/BlockNoteEditor.tsx | 7 ++-- 10 files changed, 50 insertions(+), 14 deletions(-) create mode 100644 src/frontend/apps/impress/src/core/config/hooks/index.ts create mode 100644 src/frontend/apps/impress/src/core/config/hooks/useMediaUrl.tsx 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(