🛂(frontend) block edition to not connected users

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to
 - 🚩(frontend) version MIT only #911
 - ✨(backend) integrate maleware_detection from django-lasuite #936
 - 🩺(CI) add lint spell mistakes #954
+- 🛂(frontend) block edition to not connected users #945
 
 ## Changed
 

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

@@ -102,7 +102,7 @@ export const verifyDocName = async (page: Page, docName: string) => {
 export const addNewMember = async (
   page: Page,
   index: number,
-  role: 'Administrator' | 'Owner' | 'Member' | 'Editor' | 'Reader',
+  role: 'Administrator' | 'Owner' | 'Editor' | 'Reader',
   fillText: string = 'user ',
 ) => {
   const responsePromiseSearchUser = page.waitForResponse(

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

@@ -4,6 +4,8 @@ import { expect, test } from '@playwright/test';
 import cs from 'convert-stream';
 
 import {
+  CONFIG,
+  addNewMember,
   createDoc,
   goToGridDoc,
   mockedDocument,
@@ -363,7 +365,7 @@ test.describe('Doc Editor', () => {
           partial_update: true,
           retrieve: true,
         },
-        link_reach: 'public',
+        link_reach: 'restricted',
         link_role: 'editor',
         created_at: '2021-09-01T09:00:00Z',
         title: '',
@@ -453,6 +455,55 @@ test.describe('Doc Editor', () => {
     expect(svgBuffer.toString()).toContain('Hello svg');
   });
 
+  test('it checks block editing when not connected to collab server', async ({
+    page,
+  }) => {
+    await page.route('**/api/v1.0/config/', async (route) => {
+      const request = route.request();
+      if (request.method().includes('GET')) {
+        await route.fulfill({
+          json: {
+            ...CONFIG,
+            COLLABORATION_WS_URL: 'ws://localhost:5555/collaboration/ws/',
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await page.goto('/');
+
+    void page
+      .getByRole('button', {
+        name: 'New doc',
+      })
+      .click();
+
+    const card = page.getByLabel('It is the card information');
+    await expect(
+      card.getByText('Your network do not allow you to edit'),
+    ).toBeHidden();
+    const editor = page.locator('.ProseMirror');
+
+    await expect(editor).toHaveAttribute('contenteditable', 'true');
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    await addNewMember(page, 0, 'Editor', 'impress');
+
+    // Close the modal
+    await page.getByRole('button', { name: 'close' }).first().click();
+
+    await expect(
+      card.getByText('Your network do not allow you to edit'),
+    ).toBeVisible({
+      timeout: 10000,
+    });
+
+    await expect(editor).toHaveAttribute('contenteditable', 'false');
+  });
+
   test('it checks if callout custom block', async ({ page, browserName }) => {
     await createDoc(page, 'doc-toolbar', browserName, 1);
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
-import { Doc } from '@/docs/doc-management';
+import { Doc, useIsCollaborativeEditable } from '@/docs/doc-management';
 import { useAuth } from '@/features/auth';
 
 import { useUploadFile } from '../hook';
@@ -49,7 +49,9 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const { setEditor } = useEditorStore();
   const { t } = useTranslation();
 
-  const readOnly = !doc.abilities.partial_update;
+  const { isEditable, isLoading } = useIsCollaborativeEditable(doc);
+  const readOnly = !doc.abilities.partial_update || !isEditable || isLoading;
+
   useSaveDoc(doc.id, provider.document, !readOnly);
   const { i18n } = useTranslation();
   const lang = i18n.resolvedLanguage;

src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx

@@ -25,7 +25,6 @@ interface DocEditorProps {
 
 export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
   const { isDesktop } = useResponsiveStore();
-
   const isVersion = !!versionId && typeof versionId === 'string';
 
   const { colorsTokens } = useCunninghamTheme();

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

@@ -0,0 +1,113 @@
+import { Button, Modal, ModalSize } from '@openfun/cunningham-react';
+import { t } from 'i18next';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, BoxButton, Icon, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+export const AlertNetwork = () => {
+  const { t } = useTranslation();
+  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      <Box>
+        <Box
+          $direction="row"
+          $justify="space-between"
+          $width="100%"
+          $background={colorsTokens['warning-100']}
+          $radius={spacingsTokens['3xs']}
+          $padding="xs"
+          $flex={1}
+          $align="center"
+          $gap={spacingsTokens['3xs']}
+          $css={css`
+            border: 1px solid var(--c--theme--colors--warning-300);
+          `}
+        >
+          <Box $direction="row" $gap={spacingsTokens['2xs']}>
+            <Icon iconName="mobiledata_off" $theme="warning" $variation="600" />
+            <Text $theme="warning" $variation="600" $weight={500}>
+              {t('Your network do not allow you to edit')}
+            </Text>
+          </Box>
+          <BoxButton
+            $direction="row"
+            $gap={spacingsTokens['3xs']}
+            $align="center"
+            onClick={() => setIsModalOpen(true)}
+          >
+            <Icon
+              iconName="info"
+              $theme="warning"
+              $variation="600"
+              $size="16px"
+              $weight="500"
+              $margin={{ top: 'auto' }}
+            />
+            <Text $theme="warning" $variation="600" $weight="500" $size="xs">
+              {t('Know more')}
+            </Text>
+          </BoxButton>
+        </Box>
+      </Box>
+      {isModalOpen && (
+        <AlertNetworkModal onClose={() => setIsModalOpen(false)} />
+      )}
+    </>
+  );
+};
+
+interface AlertNetworkModalProps {
+  onClose: () => void;
+}
+
+export const AlertNetworkModal = ({ onClose }: AlertNetworkModalProps) => {
+  return (
+    <Modal
+      isOpen
+      closeOnClickOutside
+      onClose={() => onClose()}
+      rightActions={
+        <>
+          <Button aria-label={t('OK')} onClick={onClose}>
+            {t('OK')}
+          </Button>
+        </>
+      }
+      size={ModalSize.MEDIUM}
+      title={
+        <Text
+          $size="h6"
+          as="h6"
+          $margin={{ all: '0' }}
+          $align="flex-start"
+          $variation="1000"
+        >
+          {t("Why can't I edit?")}
+        </Text>
+      }
+    >
+      <Box
+        aria-label={t('Content modal to explain why the user cannot edit')}
+        className="--docs--modal-alert-network"
+        $margin={{ top: 'xs' }}
+      >
+        <Text $size="sm" $variation="600">
+          {t(
+            'The network configuration of your workstation or internet connection does not allow editing shared documents.',
+          )}
+        </Text>
+        <Text $size="sm" $variation="600" $margin={{ top: 'xs' }}>
+          {t(
+            'Docs use WebSockets to enable real-time editing. These communication channels allow instant and bidirectional exchanges between your browser and our servers. To access collaborative editing, please contact your IT department to enable WebSockets.',
+          )}
+        </Text>
+      </Box>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, Icon, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+export const AlertPublic = ({ isPublicDoc }: { isPublicDoc: boolean }) => {
+  const { t } = useTranslation();
+  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+
+  return (
+    <Box
+      aria-label={t('Public document')}
+      $color={colorsTokens['primary-800']}
+      $background={colorsTokens['primary-050']}
+      $radius={spacingsTokens['3xs']}
+      $direction="row"
+      $padding="xs"
+      $flex={1}
+      $align="center"
+      $gap={spacingsTokens['3xs']}
+      $css={css`
+        border: 1px solid var(--c--theme--colors--primary-300, #e3e3fd);
+      `}
+    >
+      <Icon
+        $theme="primary"
+        $variation="800"
+        data-testid="public-icon"
+        iconName={isPublicDoc ? 'public' : 'vpn_lock'}
+      />
+      <Text $theme="primary" $variation="800" $weight="500">
+        {isPublicDoc
+          ? t('Public document')
+          : t('Document accessible to any connected person')}
+      </Text>
+    </Box>
+  );
+};

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

@@ -1,17 +1,20 @@
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
-import { Box, HorizontalSeparator, Icon, Text } from '@/components';
+import { Box, HorizontalSeparator, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
   LinkReach,
+  Role,
   currentDocRole,
+  useIsCollaborativeEditable,
   useTrans,
 } from '@/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
+import { AlertNetwork } from './AlertNetwork';
+import { AlertPublic } from './AlertPublic';
 import { DocTitle } from './DocTitle';
 import { DocToolBox } from './DocToolBox';
 
@@ -20,51 +23,26 @@ interface DocHeaderProps {
 }
 
 export const DocHeader = ({ doc }: DocHeaderProps) => {
-  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
-
   const { t } = useTranslation();
+  const { transRole } = useTrans();
+  const { isEditable } = useIsCollaborativeEditable(doc);
   const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
   const docIsAuth = doc.link_reach === LinkReach.AUTHENTICATED;
 
-  const { transRole } = useTrans();
-
   return (
     <>
       <Box
         $width="100%"
-        $padding={{ top: isDesktop ? '4xl' : 'md' }}
+        $padding={{ top: isDesktop ? '50px' : 'md' }}
         $gap={spacingsTokens['base']}
         aria-label={t('It is the card information about the document.')}
         className="--docs--doc-header"
       >
+        {!isEditable && <AlertNetwork />}
         {(docIsPublic || docIsAuth) && (
-          <Box
-            aria-label={t('Public document')}
-            $color={colorsTokens['primary-800']}
-            $background={colorsTokens['primary-050']}
-            $radius={spacingsTokens['3xs']}
-            $direction="row"
-            $padding="xs"
-            $flex={1}
-            $align="center"
-            $gap={spacingsTokens['3xs']}
-            $css={css`
-              border: 1px solid var(--c--theme--colors--primary-300, #e3e3fd);
-            `}
-          >
-            <Icon
-              $theme="primary"
-              $variation="800"
-              data-testid="public-icon"
-              iconName={docIsPublic ? 'public' : 'vpn_lock'}
-            />
-            <Text $theme="primary" $variation="800">
-              {docIsPublic
-                ? t('Public document')
-                : t('Document accessible to any connected person')}
-            </Text>
-          </Box>
+          <AlertPublic isPublicDoc={docIsPublic} />
         )}
         <Box
           $direction="row"
@@ -86,8 +64,18 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
               <Box $direction="row">
                 {isDesktop && (
                   <>
-                    <Text $variation="600" $size="s" $weight="bold">
-                      {transRole(currentDocRole(doc.abilities))}&nbsp;·&nbsp;
+                    <Text
+                      $variation="600"
+                      $size="s"
+                      $weight="bold"
+                      $theme={isEditable ? 'greyscale' : 'warning'}
+                    >
+                      {transRole(
+                        isEditable
+                          ? currentDocRole(doc.abilities)
+                          : Role.READER,
+                      )}
+                      &nbsp;·&nbsp;
                     </Text>
                     <Text $variation="600" $size="s">
                       {t('Last update: {{update}}', {

src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useCollaboration';
-export * from './useTrans';
 export * from './useCopyDocLink';
+export * from './useIsCollaborativeEditable';
+export * from './useTrans';