🚩(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".

Author: AntoLC

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to
 - ✨(frontend) create generic theme #792
 - 🛂(frontend) block edition to not connected users #945
 - 🚸 Let loader during upload analyze #984
+- 🚩(frontend) feature flag on blocking edition #997
 
 ### Changed
 

docs/env.md

@@ -47,6 +47,7 @@ These are the environment variables you can set for the `impress-backend` contai
 | COLLABORATION_API_URL                           | collaboration api host                                                                        |                                                         |
 | COLLABORATION_SERVER_SECRET                     | collaboration api secret                                                                      |                                                         |
 | COLLABORATION_WS_URL                            | collaboration websocket url                                                                   |                                                         |
+| COLLABORATION_WS_NOT_CONNECTED_READY_ONLY           | Users not connected to the collaboration server cannot edit                                   | false                                                   |
 | FRONTEND_CSS_URL                                | To add a external css file to the app                                                         |                                                         |
 | FRONTEND_HOMEPAGE_FEATURE_ENABLED               | frontend feature flag to display the homepage                                                 | false                                                   |
 | FRONTEND_THEME                                  | frontend theme to use                                                                         |                                                         |

src/backend/core/api/viewsets.py

@@ -1785,6 +1785,7 @@ def get(self, request):
         array_settings = [
             "AI_FEATURE_ENABLED",
             "COLLABORATION_WS_URL",
+            "COLLABORATION_WS_NOT_CONNECTED_READY_ONLY",
             "CRISP_WEBSITE_ID",
             "ENVIRONMENT",
             "FRONTEND_CSS_URL",

src/backend/core/tests/test_api_config.py

@@ -20,6 +20,7 @@
 @override_settings(
     AI_FEATURE_ENABLED=False,
     COLLABORATION_WS_URL="http://testcollab/",
+    COLLABORATION_WS_NOT_CONNECTED_READY_ONLY=True,
     CRISP_WEBSITE_ID="123",
     FRONTEND_CSS_URL="http://testcss/",
     FRONTEND_THEME="test-theme",
@@ -41,6 +42,7 @@ def test_api_config(is_authenticated):
     assert response.status_code == HTTP_200_OK
     assert response.json() == {
         "COLLABORATION_WS_URL": "http://testcollab/",
+        "COLLABORATION_WS_NOT_CONNECTED_READY_ONLY": True,
         "CRISP_WEBSITE_ID": "123",
         "ENVIRONMENT": "test",
         "FRONTEND_CSS_URL": "http://testcss/",

src/backend/impress/settings.py

@@ -413,6 +413,11 @@ class Base(Configuration):
     COLLABORATION_WS_URL = values.Value(
         None, environ_name="COLLABORATION_WS_URL", environ_prefix=None
     )
+    COLLABORATION_WS_NOT_CONNECTED_READY_ONLY = values.BooleanValue(
+        False,
+        environ_name="COLLABORATION_WS_NOT_CONNECTED_READY_ONLY",
+        environ_prefix=None,
+    )
 
     # Frontend
     FRONTEND_THEME = values.Value(

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,12 +1,14 @@
 import { useEffect, useState } from 'react';
 
+import { useConfig } from '@/core';
 import { useIsOffline } from '@/features/service-worker';
 
 import { useProviderStore } from '../stores';
 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,