♻️(frontend) get media url from config endpoint

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.

Author: AntoLC

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}
 

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/,
+    );
+  });
 });

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=

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

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 : '');

src/frontend/apps/impress/src/core/config/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useMediaUrl';

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 : '')
+  );
+};

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';

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;
   }

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(