🚩(frontend) feature flag on blocking edition

If users were not connected to the collaboration
server, they were not be able to edit documents.

We decided to add a feature flag on this feature
as it can be quite restrictive.
We can now enable or disable this feature at runtime
thanks to the env variable
"COLLABORATION_WS_NOT_CONNECTED_READY_ONLY".

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -4,6 +4,7 @@ export const CONFIG = {
   AI_FEATURE_ENABLED: true,
   CRISP_WEBSITE_ID: null,
   COLLABORATION_WS_URL: 'ws://localhost:4444/collaboration/ws/',
+  COLLABORATION_WS_NOT_CONNECTED_READY_ONLY: false,
   ENVIRONMENT: 'development',
   FRONTEND_CSS_URL: null,
   FRONTEND_HOMEPAGE_FEATURE_ENABLED: true,

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -516,6 +516,7 @@ test.describe('Doc Editor', () => {
           json: {
             ...CONFIG,
             COLLABORATION_WS_URL: 'ws://localhost:5555/collaboration/ws/',
+            COLLABORATION_WS_NOT_CONNECTED_READY_ONLY: true,
           },
         });
       } else {

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -12,6 +12,7 @@ interface ThemeCustomization {
 interface ConfigResponse {
   AI_FEATURE_ENABLED?: boolean;
   COLLABORATION_WS_URL?: string;
+  COLLABORATION_WS_NOT_CONNECTED_READY_ONLY?: boolean;
   CRISP_WEBSITE_ID?: string;
   ENVIRONMENT: string;
   FRONTEND_CSS_URL?: string;

src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx

@@ -29,7 +29,7 @@ export const AlertNetwork = () => {
             border: 1px solid var(--c--theme--colors--warning-300);
           `}
         >
-          <Box $direction="row" $gap={spacingsTokens['2xs']}>
+          <Box $direction="row" $gap={spacingsTokens['2xs']} $align="center">
             <Icon iconName="mobiledata_off" $theme="warning" $variation="600" />
             <Text $theme="warning" $variation="600" $weight={500}>
               {t('Your network do not allow you to edit')}

src/frontend/apps/impress/src/features/docs/doc-management/hooks/useIsCollaborativeEditable.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 
+import { useConfig } from '@/core';
 import { useIsOffline } from '@/features/service-worker';
 
 import { useProviderStore } from '../stores';
@@ -7,6 +8,7 @@ import { Doc, LinkReach } from '../types';
 
 export const useIsCollaborativeEditable = (doc: Doc) => {
   const { isConnected } = useProviderStore();
+  const { data: conf } = useConfig();
 
   const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
   const docIsAuth = doc.link_reach === LinkReach.AUTHENTICATED;
@@ -37,6 +39,13 @@ export const useIsCollaborativeEditable = (doc: Doc) => {
     return () => clearTimeout(timer);
   }, [isConnected, isOffline, isShared]);
 
+  if (!conf?.COLLABORATION_WS_NOT_CONNECTED_READY_ONLY) {
+    return {
+      isEditable: true,
+      isLoading: false,
+    };
+  }
+
   return {
     isEditable,
     isLoading,