🛂(frontend) block edition to not connected users

If an editor is working on a shared document but is not connected to the collaborative server we are now blocking the edition. It is to avoid none connected users to overwrite the document with connected users.
2025-05-06 14:25:10 +02:00
parent 598fb4fa27
commit 3c8cacc048
11 changed files with 284 additions and 42 deletions
--- a/CHANGELOG.md
+++ b/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

--- a/src/frontend/apps/e2e/tests/app-impress/common.ts
+++ b/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(
--- a/src/frontend/apps/e2e/tests/app-impress/doc-editor.spec.ts
+++ b/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);

--- 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
@@ -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;
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+++ b/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();
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx
+++ b/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>
+  );
+};
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx
+++ b/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>
+  );
+};
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+++ b/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}}', {
--- a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts
+++ b/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';
--- a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useIsCollaborativeEditable.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useIsCollaborativeEditable.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+import { useProviderStore } from '../stores';
+import { Doc, LinkReach } from '../types';
+
+export const useIsCollaborativeEditable = (doc: Doc) => {
+  const { isConnected } = useProviderStore();
+
+  const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
+  const docIsAuth = doc.link_reach === LinkReach.AUTHENTICATED;
+  const docHasMember = doc.nb_accesses_direct > 1;
+  const isShared = docIsPublic || docIsAuth || docHasMember;
+  const [isEditable, setIsEditable] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+
+  /**
+   * Connection can take a few seconds
+   */
+  useEffect(() => {
+    const _isEditable = isConnected || !isShared;
+    setIsLoading(true);
+
+    if (_isEditable) {
+      setIsEditable(true);
+      setIsLoading(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setIsEditable(false);
+      setIsLoading(false);
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, [isConnected, isShared]);
+
+  return {
+    isEditable,
+    isLoading,
+  };
+};
--- a/src/frontend/apps/impress/src/features/docs/doc-management/stores/useProviderStore.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/stores/useProviderStore.tsx
@@ -1,4 +1,4 @@
-import { HocuspocusProvider } from '@hocuspocus/provider';
+import { HocuspocusProvider, WebSocketStatus } from '@hocuspocus/provider';
 import * as Y from 'yjs';
 import { create } from 'zustand';

@@ -12,10 +12,12 @@ export interface UseCollaborationStore {
  ) => HocuspocusProvider;
  destroyProvider: () => void;
  provider: HocuspocusProvider | undefined;
+  isConnected: boolean;
 }

 const defaultValues = {
  provider: undefined,
+  isConnected: false,
 };

 export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
@@ -33,6 +35,11 @@ export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
      url: wsUrl,
      name: storeId,
      document: doc,
+      onStatus: ({ status }) => {
+        set({
+          isConnected: status === WebSocketStatus.Connected,
+        });
+      },
    });

    set({