wip

Add a documentation to deploy a self-hosted visio instance in a
standalone way (witout AI features)

.github/workflows/docker-hub.yml

@@ -19,9 +19,26 @@ jobs:
   build-and-push-backend:
     runs-on: ubuntu-latest
     steps:
+      -
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+          repositories: "impress,secrets"
       -
         name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+      -
+        name: Load sops secrets
+        uses: rouja/actions-sops@main
+        with:
+          secret-file: secrets/numerique-gouv/impress/secrets.enc.env
+          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Docker meta
         id: meta
@@ -31,7 +48,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -53,9 +70,26 @@ jobs:
   build-and-push-frontend:
     runs-on: ubuntu-latest
     steps:
+      -
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+          repositories: "impress,secrets"
       -
         name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+      -
+        name: Load sops secrets
+        uses: rouja/actions-sops@main
+        with:
+          secret-file: secrets/numerique-gouv/impress/secrets.enc.env
+          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Docker meta
         id: meta
@@ -65,7 +99,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -88,9 +122,26 @@ jobs:
   build-and-push-y-provider:
     runs-on: ubuntu-latest
     steps:
+      -
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+          repositories: "impress,secrets"
       -
         name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+      -
+        name: Load sops secrets
+        uses: rouja/actions-sops@main
+        with:
+          secret-file: secrets/numerique-gouv/impress/secrets.enc.env
+          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Docker meta
         id: meta
@@ -100,7 +151,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -128,12 +179,29 @@ jobs:
     if: |
       github.event_name != 'pull_request'
     steps:
+      -
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+          repositories: "impress,secrets"
       -
         name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+      -
+        name: Load sops secrets
+        uses: rouja/actions-sops@main
+        with:
+          secret-file: secrets/numerique-gouv/impress/secrets.enc.env
+          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Call argocd github webhook
         run: |
           data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/'$GITHUB_REPOSITORY'"}}'
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${{ secrets.ARGOCD_PREPROD_WEBHOOK_SECRET}}'' | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ vars.ARGOCD_PREPROD_WEBHOOK_URL }}
+          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${ARGOCD_WEBHOOK_SECRET}'' | awk '{print "X-Hub-Signature: sha1="$2}')
+          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" $ARGOCD_WEBHOOK_URL

.github/workflows/helmfile-linter.yaml

@@ -2,7 +2,6 @@ name: Helmfile lint
 run-name: Helmfile lint
 
 on:
-  push:
   pull_request:
     branches:
       - 'main'
@@ -13,18 +12,11 @@ jobs:
     container:
       image: ghcr.io/helmfile/helmfile:latest
     steps:
-    -
-      name: Checkout repository
-      uses: actions/checkout@v4
-    -
-      name: Helmfile lint
-      shell: bash
-      run: |
-        set -e
-        HELMFILE=src/helm/helmfile.yaml
-        environments=$(awk '/environments:/ {flag=1; next} flag && NF {print} !NF {flag=0}' "$HELMFILE" | grep -E '^[[:space:]]{2}[a-zA-Z]+' | sed 's/^[[:space:]]*//;s/:.*//')
-        for env in $environments; do
-          echo "################### $env lint ###################"
-          helmfile -e $env -f $HELMFILE lint || exit 1
-          echo -e "\n"
-        done
+      -
+        uses: numerique-gouv/action-helmfile-lint@main
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          age-key: ${{ secrets.SOPS_PRIVATE }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          helmfile-src: "src/helm"
+          repositories: "impress,secrets"

.github/workflows/release-helm-chart.yaml

@@ -3,8 +3,6 @@ run-name: Release Chart
 
 on:
   push:
-    paths:
-      - src/helm/impress/**
 
 jobs:
   release:
@@ -27,8 +25,12 @@ jobs:
         env:
           GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
 
-      - name: Publish Helm charts
-        uses: numerique-gouv/helm-gh-pages@add-overwrite-option
+      - name: Run chart-releaser
+        uses: helm/chart-releaser-action@v1.6.0
         with:
           charts_dir: ./src/helm
-          token: ${{ secrets.GITHUB_TOKEN }}
+          skip_existing: True
+          mark_as_latest: False
+        env:
+          CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          CR_GIT_REPO: numerique-gouv/helm-repo

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "secrets"]
+	path = secrets
+	url = ../secrets

CHANGELOG.md

@@ -9,33 +9,10 @@ and this project adheres to
 
 ## [Unreleased]
 
-## [2.0.0] - 2025-01-13
-
 ## Added
 
-- 🔧(backend) add option to configure list of essential OIDC claims #525 & #531
-- 🔧(helm) add option to disable default tls setting by @dominikkaminski #519
-- 💄(frontend) Add left panel #420
-- 💄(frontend) add filtering to left panel #475
-- ✨(frontend) new share modal ui #489
-- ✨(frontend) add favorite feature #515
+🔧(helm) add option to disable default tls setting by @dominikkaminski #519
 
-## Changed
-
-- 🏗️(yjs-server) organize yjs server #528
-- ♻️(frontend) better separation collaboration process #528
-- 💄(frontend) updating the header and leftpanel for responsive #421
-- 💄(frontend) update DocsGrid component #431
-- 💄(frontend) update DocsGridOptions component #432
-- 💄(frontend) update DocHeader ui #448
-- 💄(frontend) update doc versioning ui #463
-- 💄(frontend) update doc summary ui #473
-
-## Fixed
-
-- 🐛(backend) fix create document via s2s if sub unknown but email found #543
-- 🐛(frontend) hide search and create doc button if not authenticated #555
-- 🐛(backend) race condition creation issue #556
 
 ## [1.10.0] - 2024-12-17
 
@@ -54,11 +31,6 @@ and this project adheres to
 - ⚡️(e2e) reduce flakiness on e2e tests #511
 
 
-## Fixed
-- 🐛(frontend) update doc editor height #481
-- 💄(frontend) add doc search #485
-
-
 ## [1.9.0] - 2024-12-11
 
 ## Added
@@ -353,8 +325,7 @@ and this project adheres to
 - 🚀 Impress, project to manage your documents easily and collaboratively.
 
 
-[unreleased]: https://github.com/numerique-gouv/impress/compare/v2.0.0...main
-[v2.0.0]: https://github.com/numerique-gouv/impress/releases/v2.0.0
+[unreleased]: https://github.com/numerique-gouv/impress/compare/v1.10.0...main
 [v1.10.0]: https://github.com/numerique-gouv/impress/releases/v1.10.0
 [v1.9.0]: https://github.com/numerique-gouv/impress/releases/v1.9.0
 [v1.8.2]: https://github.com/numerique-gouv/impress/releases/v1.8.2

bin/_config.sh

@@ -7,7 +7,7 @@ UNSET_USER=0
 
 TERRAFORM_DIRECTORY="./env.d/terraform"
 COMPOSE_FILE="${REPO_DIR}/docker-compose.yml"
-COMPOSE_PROJECT="docs"
+COMPOSE_PROJECT="impress"
 
 
 # _set_user: set (or unset) default user id used to run docker commands

bin/start-kind.sh

@@ -1,2 +1,3 @@
 #!/bin/sh
+
 curl https://raw.githubusercontent.com/numerique-gouv/tools/refs/heads/main/kind/create_cluster.sh | bash -s -- impress

docs/installation.md

@@ -1,6 +1,6 @@
 # Installation on a k8s cluster
 
-This document is a step-by-step guide that describes how to install Docs on a k8s cluster without AI features. It's a teaching document to learn how it's work. It needs to be adapt for production environment.
+This document is a step-by-step guide that describes how to install Docs on a k8s cluster without AI features.
 
 
 ## Prerequisites
@@ -194,7 +194,7 @@ redis-master-0             1/1     Running     0          10m
 Now you are ready to deploy Impress without AI. AI requiered more dependancies (openai API). To deploy impress you need to provide all previous informations to the helm chart.
 
 ```
-$ helm repo add impress https://suitenumerique.github.io/docs/
+$ helm repo add impress https://numerique-gouv.github.io/impress/
 $ helm repo update
 $ helm install impress impress/docs -f examples/impress.values.yaml
 $ kubectl get po

src/backend/core/api/serializers.py

@@ -201,7 +201,7 @@ class DocumentSerializer(ListDocumentSerializer):
             "abilities",
             "created_at",
             "creator",
-            "is_favorite",
+            "is_avorite",
             "link_role",
             "link_reach",
             "nb_accesses",
@@ -264,17 +264,13 @@ class ServerCreateDocumentSerializer(serializers.Serializer):
         """Create the document and associate it with the user or send an invitation."""
         language = validated_data.get("language", settings.LANGUAGE_CODE)
 
-        # Get the user on its sub (unique identifier). Default on email if allowed in settings
-        email = validated_data["email"]
-
+        # Get the user based on the sub (unique identifier)
         try:
-            user = models.User.objects.get_user_by_sub_or_email(
-                validated_data["sub"], email
-            )
-        except models.DuplicateEmailError as err:
-            raise serializers.ValidationError({"email": [err.message]}) from err
-
-        if user:
+            user = models.User.objects.get(sub=validated_data["sub"])
+        except (models.User.DoesNotExist, KeyError):
+            user = None
+            email = validated_data["email"]
+        else:
             email = user.email
             language = user.language or language
 
@@ -283,9 +279,7 @@ class ServerCreateDocumentSerializer(serializers.Serializer):
                 validated_data["content"]
             )
         except ConversionError as err:
-            raise serializers.ValidationError(
-                {"content": ["Could not convert content"]}
-            ) from err
+            raise exceptions.APIException(detail="could not convert content") from err
 
         document = models.Document.objects.create(
             title=validated_data["title"],
@@ -308,11 +302,7 @@ class ServerCreateDocumentSerializer(serializers.Serializer):
                 role=models.RoleChoices.OWNER,
             )
 
-        self._send_email_notification(document, validated_data, email, language)
-        return document
-
-    def _send_email_notification(self, document, validated_data, email, language):
-        """Notify the user about the newly created document."""
+        # Notify the user about the newly created document
         subject = validated_data.get("subject") or _(
             "A new document was created on your behalf!"
         )
@@ -323,6 +313,8 @@ class ServerCreateDocumentSerializer(serializers.Serializer):
         }
         document.send_email(subject, [email], context, language)
 
+        return document
+
     def update(self, instance, validated_data):
         """
         This serializer does not support updates.

src/backend/core/api/viewsets.py

@@ -676,7 +676,7 @@ class DocumentViewSet(
 
         # Fetch the document and check if the user has access
         try:
-            document = models.Document.objects.get(pk=pk)
+            document, _created = models.Document.objects.get_or_create(pk=pk)
         except models.Document.DoesNotExist as exc:
             logger.debug("Document with ID '%s' does not exist", pk)
             raise drf.exceptions.PermissionDenied() from exc

src/backend/core/authentication/backends.py

@@ -1,7 +1,5 @@
 """Authentication Backends for the Impress core app."""
 
-import logging
-
 from django.conf import settings
 from django.core.exceptions import SuspiciousOperation
 from django.utils.translation import gettext_lazy as _
@@ -11,9 +9,7 @@ from mozilla_django_oidc.auth import (
     OIDCAuthenticationBackend as MozillaOIDCAuthenticationBackend,
 )
 
-from core.models import DuplicateEmailError, User
-
-logger = logging.getLogger(__name__)
+from core.models import User
 
 
 class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
@@ -63,29 +59,10 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
 
         return userinfo
 
-    def verify_claims(self, claims):
-        """
-        Verify the presence of essential claims and the "sub" (which is mandatory as defined
-        by the OIDC specification) to decide if authentication should be allowed.
-        """
-        essential_claims = settings.USER_OIDC_ESSENTIAL_CLAIMS
-        missing_claims = [claim for claim in essential_claims if claim not in claims]
-
-        if missing_claims:
-            logger.error("Missing essential claims: %s", missing_claims)
-            return False
-
-        return True
-
     def get_or_create_user(self, access_token, id_token, payload):
         """Return a User based on userinfo. Create a new user if no match is found."""
 
         user_info = self.get_userinfo(access_token, id_token, payload)
-
-        if not self.verify_claims(user_info):
-            raise SuspiciousOperation("Claims verification failed.")
-
-        sub = user_info["sub"]
         email = user_info.get("email")
 
         # Get user's full name from OIDC fields defined in settings
@@ -98,10 +75,13 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
             "short_name": short_name,
         }
 
-        try:
-            user = User.objects.get_user_by_sub_or_email(sub, email)
-        except DuplicateEmailError as err:
-            raise SuspiciousOperation(err.message) from err
+        sub = user_info.get("sub")
+        if not sub:
+            raise SuspiciousOperation(
+                _("User info contained no recognizable user identification")
+            )
+
+        user = self.get_existing_user(sub, email)
 
         if user:
             if not user.is_active:
@@ -120,6 +100,18 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
         )
         return full_name or None
 
+    def get_existing_user(self, sub, email):
+        """Fetch existing user by sub or email."""
+        try:
+            return User.objects.get(sub=sub)
+        except User.DoesNotExist:
+            if email and settings.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION:
+                try:
+                    return User.objects.get(email=email)
+                except User.DoesNotExist:
+                    pass
+        return None
+
     def update_user_if_needed(self, user, claims):
         """Update user claims if they have changed."""
         has_changed = any(
@@ -127,4 +119,4 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
         )
         if has_changed:
             updated_claims = {key: value for key, value in claims.items() if value}
-            self.UserModel.objects.filter(id=user.id).update(**updated_claims)
+            self.UserModel.objects.filter(sub=user.sub).update(**updated_claims)

src/backend/core/models.py

@@ -1,7 +1,6 @@
 """
 Declare and configure the models for the impress core application
 """
-# pylint: disable=too-many-lines
 
 import hashlib
 import smtplib
@@ -90,16 +89,6 @@ class LinkReachChoices(models.TextChoices):
     PUBLIC = "public", _("Public")  # Even anonymous users can access the document
 
 
-class DuplicateEmailError(Exception):
-    """Raised when an email is already associated with a pre-existing user."""
-
-    def __init__(self, message=None, email=None):
-        """Set message and email to describe the exception."""
-        self.message = message
-        self.email = email
-        super().__init__(self.message)
-
-
 class BaseModel(models.Model):
     """
     Serves as an abstract base model for other models, ensuring that records are validated
@@ -137,35 +126,6 @@ class BaseModel(models.Model):
         super().save(*args, **kwargs)
 
 
-class UserManager(auth_models.UserManager):
-    """Custom manager for User model with additional methods."""
-
-    def get_user_by_sub_or_email(self, sub, email):
-        """Fetch existing user by sub or email."""
-        try:
-            return self.get(sub=sub)
-        except self.model.DoesNotExist as err:
-            if not email:
-                return None
-
-            if settings.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION:
-                try:
-                    return self.get(email=email)
-                except self.model.DoesNotExist:
-                    pass
-            elif (
-                self.filter(email=email).exists()
-                and not settings.OIDC_ALLOW_DUPLICATE_EMAILS
-            ):
-                raise DuplicateEmailError(
-                    _(
-                        "We couldn't find a user with this sub but the email is already "
-                        "associated with a registered user."
-                    )
-                ) from err
-        return None
-
-
 class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
     """User model to work with OIDC only authentication."""
 
@@ -232,7 +192,7 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
         ),
     )
 
-    objects = UserManager()
+    objects = auth_models.UserManager()
 
     USERNAME_FIELD = "admin_email"
     REQUIRED_FIELDS = []
@@ -979,10 +939,7 @@ class Invitation(BaseModel):
         super().clean()
 
         # Check if an identity already exists for the provided email
-        if (
-            User.objects.filter(email=self.email).exists()
-            and not settings.OIDC_ALLOW_DUPLICATE_EMAILS
-        ):
+        if User.objects.filter(email=self.email).exists():
             raise exceptions.ValidationError(
                 {"email": _("This email is already associated to a registered user.")}
             )

src/backend/core/tests/authentication/test_backends.py

@@ -1,9 +1,6 @@
 """Unit tests for the Authentication Backends."""
 
-import random
 import re
-from logging import Logger
-from unittest import mock
 
 from django.core.exceptions import SuspiciousOperation
 from django.test.utils import override_settings
@@ -65,33 +62,7 @@ def test_authentication_getter_existing_user_via_email(
     assert user == db_user
 
 
-def test_authentication_getter_email_none(monkeypatch):
-    """
-    If no user is found with the sub and no email is provided, a new user should be created.
-    """
-
-    klass = OIDCAuthenticationBackend()
-    db_user = UserFactory(email=None)
-
-    def get_userinfo_mocked(*args):
-        user_info = {"sub": "123"}
-        if random.choice([True, False]):
-            user_info["email"] = None
-        return user_info
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    user = klass.get_or_create_user(
-        access_token="test-token", id_token=None, payload=None
-    )
-
-    # Since the sub and email didn't match, it should create a new user
-    assert models.User.objects.count() == 2
-    assert user != db_user
-    assert user.sub == "123"
-
-
-def test_authentication_getter_existing_user_no_fallback_to_email_allow_duplicate(
+def test_authentication_getter_existing_user_no_fallback_to_email(
     settings, monkeypatch
 ):
     """
@@ -104,7 +75,6 @@ def test_authentication_getter_existing_user_no_fallback_to_email_allow_duplicat
 
     # Set the setting to False
     settings.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION = False
-    settings.OIDC_ALLOW_DUPLICATE_EMAILS = True
 
     def get_userinfo_mocked(*args):
         return {"sub": "123", "email": db_user.email}
@@ -121,39 +91,6 @@ def test_authentication_getter_existing_user_no_fallback_to_email_allow_duplicat
     assert user.sub == "123"
 
 
-def test_authentication_getter_existing_user_no_fallback_to_email_no_duplicate(
-    settings, monkeypatch
-):
-    """
-    When the "OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION" setting is set to False,
-    the system should not match users by email, even if the email matches.
-    """
-
-    klass = OIDCAuthenticationBackend()
-    db_user = UserFactory()
-
-    # Set the setting to False
-    settings.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION = False
-    settings.OIDC_ALLOW_DUPLICATE_EMAILS = False
-
-    def get_userinfo_mocked(*args):
-        return {"sub": "123", "email": db_user.email}
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    with pytest.raises(
-        SuspiciousOperation,
-        match=(
-            "We couldn't find a user with this sub but the email is already associated "
-            "with a registered user."
-        ),
-    ):
-        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
-
-    # Since the sub doesn't match, it should not create a new user
-    assert models.User.objects.count() == 1
-
-
 def test_authentication_getter_existing_user_with_email(
     django_assert_num_queries, monkeypatch
 ):
@@ -191,12 +128,11 @@ def test_authentication_getter_existing_user_with_email(
         ("Jack", "Duy", "jack.duy@example.com"),
     ],
 )
-def test_authentication_getter_existing_user_change_fields_sub(
+def test_authentication_getter_existing_user_change_fields(
     first_name, last_name, email, django_assert_num_queries, monkeypatch
 ):
     """
-    It should update the email or name fields on the user when they change
-    and the user was identified by its "sub".
+    It should update the email or name fields on the user when they change.
     """
     klass = OIDCAuthenticationBackend()
     user = UserFactory(
@@ -226,48 +162,6 @@ def test_authentication_getter_existing_user_change_fields_sub(
     assert user.short_name == first_name
 
 
-@pytest.mark.parametrize(
-    "first_name, last_name, email",
-    [
-        ("Jack", "Doe", "john.doe@example.com"),
-        ("John", "Duy", "john.doe@example.com"),
-    ],
-)
-def test_authentication_getter_existing_user_change_fields_email(
-    first_name, last_name, email, django_assert_num_queries, monkeypatch
-):
-    """
-    It should update the name fields on the user when they change
-    and the user was identified by its "email" as fallback.
-    """
-    klass = OIDCAuthenticationBackend()
-    user = UserFactory(
-        full_name="John Doe", short_name="John", email="john.doe@example.com"
-    )
-
-    def get_userinfo_mocked(*args):
-        return {
-            "sub": "123",
-            "email": user.email,
-            "first_name": first_name,
-            "last_name": last_name,
-        }
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    # One and only one additional update query when a field has changed
-    with django_assert_num_queries(3):
-        authenticated_user = klass.get_or_create_user(
-            access_token="test-token", id_token=None, payload=None
-        )
-
-    assert user == authenticated_user
-    user.refresh_from_db()
-    assert user.email == email
-    assert user.full_name == f"{first_name:s} {last_name:s}"
-    assert user.short_name == first_name
-
-
 def test_authentication_getter_new_user_no_email(monkeypatch):
     """
     If no user matches the user's info sub, a user should be created.
@@ -319,6 +213,29 @@ def test_authentication_getter_new_user_with_email(monkeypatch):
     assert models.User.objects.count() == 1
 
 
+def test_authentication_getter_invalid_token(django_assert_num_queries, monkeypatch):
+    """The user's info doesn't contain a sub."""
+    klass = OIDCAuthenticationBackend()
+
+    def get_userinfo_mocked(*args):
+        return {
+            "test": "123",
+        }
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    with (
+        django_assert_num_queries(0),
+        pytest.raises(
+            SuspiciousOperation,
+            match="User info contained no recognizable user identification",
+        ),
+    ):
+        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
+
+    assert models.User.objects.exists() is False
+
+
 @override_settings(OIDC_OP_USER_ENDPOINT="http://oidc.endpoint.test/userinfo")
 @responses.activate
 def test_authentication_get_userinfo_json_response():
@@ -424,7 +341,7 @@ def test_authentication_getter_existing_disabled_user_via_email(
     django_assert_num_queries, monkeypatch
 ):
     """
-    If an existing user does not match the sub but matches the email and is disabled,
+    If an existing user does not matches the sub but matches the email and is disabled,
     an error should be raised and a user should not be created.
     """
 
@@ -448,102 +365,3 @@ def test_authentication_getter_existing_disabled_user_via_email(
         klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
 
     assert models.User.objects.count() == 1
-
-
-# Essential claims
-
-
-def test_authentication_verify_claims_default(django_assert_num_queries, monkeypatch):
-    """The sub claim should be mandatory by default."""
-    klass = OIDCAuthenticationBackend()
-
-    def get_userinfo_mocked(*args):
-        return {
-            "test": "123",
-        }
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    with (
-        django_assert_num_queries(0),
-        pytest.raises(
-            KeyError,
-            match="sub",
-        ),
-    ):
-        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
-
-    assert models.User.objects.exists() is False
-
-
-@pytest.mark.parametrize(
-    "essential_claims, missing_claims",
-    [
-        (["email", "sub"], ["email"]),
-        (["Email", "sub"], ["Email"]),  # Case sensitivity
-    ],
-)
-@override_settings(OIDC_OP_USER_ENDPOINT="http://oidc.endpoint.test/userinfo")
-@mock.patch.object(Logger, "error")
-def test_authentication_verify_claims_essential_missing(
-    mock_logger,
-    essential_claims,
-    missing_claims,
-    django_assert_num_queries,
-    monkeypatch,
-):
-    """Ensure SuspiciousOperation is raised if essential claims are missing."""
-
-    klass = OIDCAuthenticationBackend()
-
-    def get_userinfo_mocked(*args):
-        return {
-            "sub": "123",
-            "last_name": "Doe",
-        }
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    with (
-        django_assert_num_queries(0),
-        pytest.raises(
-            SuspiciousOperation,
-            match="Claims verification failed",
-        ),
-        override_settings(USER_OIDC_ESSENTIAL_CLAIMS=essential_claims),
-    ):
-        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
-
-    assert models.User.objects.exists() is False
-    mock_logger.assert_called_once_with("Missing essential claims: %s", missing_claims)
-
-
-@override_settings(
-    OIDC_OP_USER_ENDPOINT="http://oidc.endpoint.test/userinfo",
-    USER_OIDC_ESSENTIAL_CLAIMS=["email", "last_name"],
-)
-def test_authentication_verify_claims_success(django_assert_num_queries, monkeypatch):
-    """Ensure user is authenticated when all essential claims are present."""
-
-    klass = OIDCAuthenticationBackend()
-
-    def get_userinfo_mocked(*args):
-        return {
-            "email": "john.doe@example.com",
-            "last_name": "Doe",
-            "sub": "123",
-        }
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    with django_assert_num_queries(6):
-        user = klass.get_or_create_user(
-            access_token="test-token", id_token=None, payload=None
-        )
-
-    assert models.User.objects.filter(id=user.id).exists()
-
-    assert user.sub == "123"
-    assert user.full_name == "Doe"
-    assert user.short_name is None
-    assert user.email == "john.doe@example.com"

src/backend/core/tests/documents/test_api_documents_create_for_owner.py

@@ -13,7 +13,6 @@ import pytest
 from rest_framework.test import APIClient
 
 from core import factories
-from core.api.serializers import ServerCreateDocumentSerializer
 from core.models import Document, Invitation, User
 from core.services.converter_services import ConversionError, YdocConverter
 
@@ -21,7 +20,7 @@ pytestmark = pytest.mark.django_db
 
 
 @pytest.fixture
-def mock_convert_md():
+def mock_convert_markdown():
     """Mock YdocConverter.convert_markdown to return a converted content."""
     with patch.object(
         YdocConverter,
@@ -170,11 +169,8 @@ def test_api_documents_create_for_owner_invalid_sub():
 
 
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
-def test_api_documents_create_for_owner_existing(mock_convert_md):
-    """
-    It should be possible to create a document on behalf of a pre-existing user
-    by passing their sub and email.
-    """
+def test_api_documents_create_for_owner_existing(mock_convert_markdown):
+    """It should be possible to create a document on behalf of a pre-existing user."""
     user = factories.UserFactory(language="en-us")
 
     data = {
@@ -193,7 +189,7 @@ def test_api_documents_create_for_owner_existing(mock_convert_md):
 
     assert response.status_code == 201
 
-    mock_convert_md.assert_called_once_with("Document content")
+    mock_convert_markdown.assert_called_once_with("Document content")
 
     document = Document.objects.get()
     assert response.json() == {"id": str(document.id)}
@@ -217,10 +213,10 @@ def test_api_documents_create_for_owner_existing(mock_convert_md):
 
 
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
-def test_api_documents_create_for_owner_new_user(mock_convert_md):
+def test_api_documents_create_for_owner_new_user(mock_convert_markdown):
     """
     It should be possible to create a document on behalf of new users by
-    passing their unknown sub and email address.
+    passing only their email address.
     """
     data = {
         "title": "My Document",
@@ -238,7 +234,7 @@ def test_api_documents_create_for_owner_new_user(mock_convert_md):
 
     assert response.status_code == 201
 
-    mock_convert_md.assert_called_once_with("Document content")
+    mock_convert_markdown.assert_called_once_with("Document content")
 
     document = Document.objects.get()
     assert response.json() == {"id": str(document.id)}
@@ -268,190 +264,8 @@ def test_api_documents_create_for_owner_new_user(mock_convert_md):
     assert document.creator == user
 
 
-@override_settings(
-    SERVER_TO_SERVER_API_TOKENS=["DummyToken"],
-    OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION=True,
-)
-def test_api_documents_create_for_owner_existing_user_email_no_sub_with_fallback(
-    mock_convert_md,
-):
-    """
-    It should be possible to create a document on behalf of a pre-existing user for
-    who the sub was not found if the settings allow it. This edge case should not
-    happen in a healthy OIDC federation but can be usefull if an OIDC provider modifies
-    users sub on each login for example...
-    """
-    user = factories.UserFactory(language="en-us")
-
-    data = {
-        "title": "My Document",
-        "content": "Document content",
-        "sub": "123",
-        "email": user.email,
-    }
-
-    response = APIClient().post(
-        "/api/v1.0/documents/create-for-owner/",
-        data,
-        format="json",
-        HTTP_AUTHORIZATION="Bearer DummyToken",
-    )
-
-    assert response.status_code == 201
-
-    mock_convert_md.assert_called_once_with("Document content")
-
-    document = Document.objects.get()
-    assert response.json() == {"id": str(document.id)}
-
-    assert document.title == "My Document"
-    assert document.content == "Converted document content"
-    assert document.creator == user
-    assert document.accesses.filter(user=user, role="owner").exists()
-
-    assert Invitation.objects.exists() is False
-
-    assert len(mail.outbox) == 1
-    email = mail.outbox[0]
-    assert email.to == [user.email]
-    assert email.subject == "A new document was created on your behalf!"
-    email_content = " ".join(email.body.split())
-    assert "A new document was created on your behalf!" in email_content
-    assert (
-        "You have been granted ownership of a new document: My Document"
-    ) in email_content
-
-
-@override_settings(
-    SERVER_TO_SERVER_API_TOKENS=["DummyToken"],
-    OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION=False,
-    OIDC_ALLOW_DUPLICATE_EMAILS=False,
-)
-def test_api_documents_create_for_owner_existing_user_email_no_sub_no_fallback(
-    mock_convert_md,
-):
-    """
-    When a user does not match an existing sub and fallback to matching on email is
-    not allowed in settings, it should raise an error if the email is already used by
-    a registered user and duplicate emails are not allowed.
-    """
-    user = factories.UserFactory()
-
-    data = {
-        "title": "My Document",
-        "content": "Document content",
-        "sub": "123",
-        "email": user.email,
-    }
-
-    response = APIClient().post(
-        "/api/v1.0/documents/create-for-owner/",
-        data,
-        format="json",
-        HTTP_AUTHORIZATION="Bearer DummyToken",
-    )
-    assert response.status_code == 400
-    assert response.json() == {
-        "email": [
-            (
-                "We couldn't find a user with this sub but the email is already "
-                "associated with a registered user."
-            )
-        ]
-    }
-    assert mock_convert_md.called is False
-    assert Document.objects.exists() is False
-    assert Invitation.objects.exists() is False
-    assert len(mail.outbox) == 0
-
-
-@override_settings(
-    SERVER_TO_SERVER_API_TOKENS=["DummyToken"],
-    OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION=False,
-    OIDC_ALLOW_DUPLICATE_EMAILS=True,
-)
-def test_api_documents_create_for_owner_new_user_no_sub_no_fallback_allow_duplicate(
-    mock_convert_md,
-):
-    """
-    When a user does not match an existing sub and fallback to matching on email is
-    not allowed in settings, it should be possible to create a new user with the same
-    email as an existing user if the settings allow it (identification is still done
-    via the sub in this case).
-    """
-    user = factories.UserFactory()
-
-    data = {
-        "title": "My Document",
-        "content": "Document content",
-        "sub": "123",
-        "email": user.email,
-    }
-
-    response = APIClient().post(
-        "/api/v1.0/documents/create-for-owner/",
-        data,
-        format="json",
-        HTTP_AUTHORIZATION="Bearer DummyToken",
-    )
-    assert response.status_code == 201
-    mock_convert_md.assert_called_once_with("Document content")
-
-    document = Document.objects.get()
-    assert response.json() == {"id": str(document.id)}
-
-    assert document.title == "My Document"
-    assert document.content == "Converted document content"
-    assert document.creator is None
-    assert document.accesses.exists() is False
-
-    invitation = Invitation.objects.get()
-    assert invitation.email == user.email
-    assert invitation.role == "owner"
-
-    assert len(mail.outbox) == 1
-    email = mail.outbox[0]
-    assert email.to == [user.email]
-    assert email.subject == "A new document was created on your behalf!"
-    email_content = " ".join(email.body.split())
-    assert "A new document was created on your behalf!" in email_content
-    assert (
-        "You have been granted ownership of a new document: My Document"
-    ) in email_content
-
-    # The creator field on the document should be set when the user is created
-    user = User.objects.create(email=user.email, password="!")
-    document.refresh_from_db()
-    assert document.creator == user
-
-
-@patch.object(ServerCreateDocumentSerializer, "_send_email_notification")
-@override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"], LANGUAGE_CODE="de-de")
-def test_api_documents_create_for_owner_with_default_language(
-    mock_send, mock_convert_md
-):
-    """The default language from settings should apply by default."""
-    data = {
-        "title": "My Document",
-        "content": "Document content",
-        "sub": "123",
-        "email": "john.doe@example.com",
-    }
-
-    response = APIClient().post(
-        "/api/v1.0/documents/create-for-owner/",
-        data,
-        format="json",
-        HTTP_AUTHORIZATION="Bearer DummyToken",
-    )
-    assert response.status_code == 201
-
-    mock_convert_md.assert_called_once_with("Document content")
-    assert mock_send.call_args[0][3] == "de-de"
-
-
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
-def test_api_documents_create_for_owner_with_custom_language(mock_convert_md):
+def test_api_documents_create_for_owner_with_custom_language(mock_convert_markdown):
     """
     Test creating a document with a specific language.
     Useful if the remote server knows the user's language.
@@ -473,7 +287,7 @@ def test_api_documents_create_for_owner_with_custom_language(mock_convert_md):
 
     assert response.status_code == 201
 
-    mock_convert_md.assert_called_once_with("Document content")
+    mock_convert_markdown.assert_called_once_with("Document content")
 
     assert len(mail.outbox) == 1
     email = mail.outbox[0]
@@ -488,7 +302,7 @@ def test_api_documents_create_for_owner_with_custom_language(mock_convert_md):
 
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
 def test_api_documents_create_for_owner_with_custom_subject_and_message(
-    mock_convert_md,
+    mock_convert_markdown,
 ):
     """It should be possible to customize the subject and message of the invitation email."""
     data = {
@@ -509,7 +323,7 @@ def test_api_documents_create_for_owner_with_custom_subject_and_message(
 
     assert response.status_code == 201
 
-    mock_convert_md.assert_called_once_with("Document content")
+    mock_convert_markdown.assert_called_once_with("Document content")
 
     assert len(mail.outbox) == 1
     email = mail.outbox[0]
@@ -522,11 +336,11 @@ def test_api_documents_create_for_owner_with_custom_subject_and_message(
 
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
 def test_api_documents_create_for_owner_with_converter_exception(
-    mock_convert_md,
+    mock_convert_markdown,
 ):
-    """In case of converter error, a 400 error should be raised."""
+    """It should be possible to customize the subject and message of the invitation email."""
 
-    mock_convert_md.side_effect = ConversionError("Conversion failed")
+    mock_convert_markdown.side_effect = ConversionError("Conversion failed")
 
     data = {
         "title": "My Document",
@@ -543,33 +357,8 @@ def test_api_documents_create_for_owner_with_converter_exception(
         format="json",
         HTTP_AUTHORIZATION="Bearer DummyToken",
     )
-    mock_convert_md.assert_called_once_with("Document content")
 
-    assert response.status_code == 400
-    assert response.json() == {"content": ["Could not convert content"]}
+    mock_convert_markdown.assert_called_once_with("Document content")
 
-
-@override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
-def test_api_documents_create_for_owner_with_empty_content():
-    """The content should not be empty or a 400 error should be raised."""
-
-    data = {
-        "title": "My Document",
-        "content": "  ",
-        "sub": "123",
-        "email": "john.doe@example.com",
-    }
-
-    response = APIClient().post(
-        "/api/v1.0/documents/create-for-owner/",
-        data,
-        format="json",
-        HTTP_AUTHORIZATION="Bearer DummyToken",
-    )
-
-    assert response.status_code == 400
-    assert response.json() == {
-        "content": [
-            "This field may not be blank.",
-        ],
-    }
+    assert response.status_code == 500
+    assert response.json() == {"detail": "could not convert content"}

src/backend/core/tests/test_settings.py

@@ -1,30 +0,0 @@
-"""
-Unit tests for the User model
-"""
-
-import pytest
-
-from impress.settings import Base
-
-
-def test_invalid_settings_oidc_email_configuration():
-    """
-    The OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION and OIDC_ALLOW_DUPLICATE_EMAILS settings
-    should not be both set to True simultaneously.
-    """
-
-    class TestSettings(Base):
-        """Fake test settings."""
-
-        OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION = True
-        OIDC_ALLOW_DUPLICATE_EMAILS = True
-
-    # The validation is performed during post_setup
-    with pytest.raises(ValueError) as excinfo:
-        TestSettings().post_setup()
-
-    # Check the exception message
-    assert str(excinfo.value) == (
-        "Both OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION and "
-        "OIDC_ALLOW_DUPLICATE_EMAILS cannot be set to True simultaneously. "
-    )

src/backend/impress/settings.py

@@ -474,18 +474,6 @@ class Base(Configuration):
         environ_prefix=None,
     )
 
-    # WARNING: Enabling this setting allows multiple user accounts to share the same email
-    # address. This may cause security issues and is not recommended for production use when
-    # email is activated as fallback for identification (see previous setting).
-    OIDC_ALLOW_DUPLICATE_EMAILS = values.BooleanValue(
-        default=False,
-        environ_name="OIDC_ALLOW_DUPLICATE_EMAILS",
-        environ_prefix=None,
-    )
-
-    USER_OIDC_ESSENTIAL_CLAIMS = values.ListValue(
-        default=[], environ_name="USER_OIDC_ESSENTIAL_CLAIMS", environ_prefix=None
-    )
     USER_OIDC_FIELDS_TO_FULLNAME = values.ListValue(
         default=["first_name", "last_name"],
         environ_name="USER_OIDC_FIELDS_TO_FULLNAME",
@@ -634,15 +622,6 @@ class Base(Configuration):
             with sentry_sdk.configure_scope() as scope:
                 scope.set_extra("application", "backend")
 
-        if (
-            cls.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION
-            and cls.OIDC_ALLOW_DUPLICATE_EMAILS
-        ):
-            raise ValueError(
-                "Both OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION and "
-                "OIDC_ALLOW_DUPLICATE_EMAILS cannot be set to True simultaneously. "
-            )
-
 
 class Build(Base):
     """Settings used when the application is built.

src/backend/locale/de_DE/LC_MESSAGES/django.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: lasuite-people\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: 2024-12-17 15:50+0000\n"
-"PO-Revision-Date: 2025-01-14 15:14\n"
+"PO-Revision-Date: 2024-12-17 15:53\n"
 "Last-Translator: \n"
 "Language-Team: German\n"
 "Language: de_DE\n"
@@ -31,23 +31,23 @@ msgstr "Wichtige Daten"
 
 #: core/api/filters.py:16
 msgid "Creator is me"
-msgstr "Ersteller bin ich"
+msgstr ""
 
 #: core/api/filters.py:19
 msgid "Favorite"
-msgstr "Favorit"
+msgstr ""
 
 #: core/api/filters.py:22
 msgid "Title"
-msgstr "Titel"
+msgstr ""
 
 #: core/api/serializers.py:307
 msgid "A new document was created on your behalf!"
-msgstr "Ein neues Dokument wurde in Ihrem Namen erstellt!"
+msgstr ""
 
 #: core/api/serializers.py:311
 msgid "You have been granted ownership of a new document:"
-msgstr "Sie sind Besitzer eines neuen Dokuments:"
+msgstr ""
 
 #: core/api/serializers.py:414
 msgid "Body"
@@ -63,15 +63,15 @@ msgstr "Format"
 
 #: core/authentication/backends.py:57
 msgid "Invalid response format or token verification failed"
-msgstr "Ungültiges Antwortformat oder Token-Verifizierung fehlgeschlagen"
+msgstr ""
 
 #: core/authentication/backends.py:81
 msgid "User info contained no recognizable user identification"
-msgstr "Benutzerinfo enthielt keine erkennbare Benutzeridentifikation"
+msgstr ""
 
 #: core/authentication/backends.py:88
 msgid "User account is disabled"
-msgstr "Benutzerkonto ist deaktiviert"
+msgstr ""
 
 #: core/models.py:62 core/models.py:69
 msgid "Reader"
@@ -127,31 +127,31 @@ msgstr "Datum und Uhrzeit, an dem zuletzt aktualisiert wurde"
 
 #: core/models.py:135
 msgid "Enter a valid sub. This value may contain only letters, numbers, and @/./+/-/_/: characters."
-msgstr "Geben Sie eine gültige Unterseite ein. Dieser Wert darf nur Buchstaben, Zahlen und die @/./+/-/_/: Zeichen enthalten."
+msgstr ""
 
 #: core/models.py:141
 msgid "sub"
-msgstr "unter"
+msgstr ""
 
 #: core/models.py:143
 msgid "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_/: characters only."
-msgstr "Erforderlich. 255 Zeichen oder weniger. Buchstaben, Zahlen und die Zeichen @/./+/-/_/:"
+msgstr ""
 
 #: core/models.py:152
 msgid "full name"
-msgstr "Name"
+msgstr ""
 
 #: core/models.py:153
 msgid "short name"
-msgstr "Kurzbezeichnung"
+msgstr ""
 
 #: core/models.py:155
 msgid "identity email address"
-msgstr "Identitäts-E-Mail-Adresse"
+msgstr ""
 
 #: core/models.py:160
 msgid "admin email address"
-msgstr "Admin E-Mail-Adresse"
+msgstr ""
 
 #: core/models.py:167
 msgid "language"
@@ -159,35 +159,35 @@ msgstr "Sprache"
 
 #: core/models.py:168
 msgid "The language in which the user wants to see the interface."
-msgstr "Die Sprache, in der der Benutzer die Benutzeroberfläche sehen möchte."
+msgstr ""
 
 #: core/models.py:174
 msgid "The timezone in which the user wants to see times."
-msgstr "Die Zeitzone, in der der Nutzer Zeiten sehen möchte."
+msgstr ""
 
 #: core/models.py:177
 msgid "device"
-msgstr "Gerät"
+msgstr ""
 
 #: core/models.py:179
 msgid "Whether the user is a device or a real user."
-msgstr "Ob der Benutzer ein Gerät oder ein echter Benutzer ist."
+msgstr ""
 
 #: core/models.py:182
 msgid "staff status"
-msgstr "Status des Teammitgliedes"
+msgstr ""
 
 #: core/models.py:184
 msgid "Whether the user can log into this admin site."
-msgstr "Gibt an, ob der Benutzer sich in diese Admin-Seite einloggen kann."
+msgstr ""
 
 #: core/models.py:187
 msgid "active"
-msgstr "aktiviert"
+msgstr ""
 
 #: core/models.py:190
 msgid "Whether this user should be treated as active. Unselect this instead of deleting accounts."
-msgstr "Ob dieser Benutzer als aktiviert behandelt werden soll. Deaktivieren Sie diese Option, anstatt Konten zu löschen."
+msgstr ""
 
 #: core/models.py:202
 msgid "user"
@@ -216,25 +216,25 @@ msgstr "Unbenanntes Dokument"
 #: core/models.py:593
 #, python-brace-format
 msgid "{name} shared a document with you!"
-msgstr "{name} hat ein Dokument mit Ihnen geteilt!"
+msgstr ""
 
 #: core/models.py:597
 #, python-brace-format
 msgid "{name} invited you with the role \"{role}\" on the following document:"
-msgstr "{name} hat Sie mit der Rolle \"{role}\" zu folgendem Dokument eingeladen:"
+msgstr ""
 
 #: core/models.py:600
 #, python-brace-format
 msgid "{name} shared a document with you: {title}"
-msgstr "{name} hat ein Dokument mit Ihnen geteilt: {title}"
+msgstr ""
 
 #: core/models.py:623
 msgid "Document/user link trace"
-msgstr "Dokument/Benutzer Linkverfolgung"
+msgstr ""
 
 #: core/models.py:624
 msgid "Document/user link traces"
-msgstr "Dokument/Benutzer Linkverfolgung"
+msgstr ""
 
 #: core/models.py:630
 msgid "A link trace already exists for this document/user."
@@ -242,23 +242,23 @@ msgstr ""
 
 #: core/models.py:653
 msgid "Document favorite"
-msgstr "Dokumentenfavorit"
+msgstr ""
 
 #: core/models.py:654
 msgid "Document favorites"
-msgstr "Dokumentfavoriten"
+msgstr ""
 
 #: core/models.py:660
 msgid "This document is already targeted by a favorite relation instance for the same user."
-msgstr "Dieses Dokument ist bereits durch den gleichen Benutzer favorisiert worden."
+msgstr ""
 
 #: core/models.py:682
 msgid "Document/user relation"
-msgstr "Dokument/Benutzerbeziehung"
+msgstr ""
 
 #: core/models.py:683
 msgid "Document/user relations"
-msgstr "Dokument/Benutzerbeziehungen"
+msgstr ""
 
 #: core/models.py:689
 msgid "This user is already in this document."
@@ -294,101 +294,101 @@ msgstr "Ob diese Vorlage für jedermann öffentlich ist."
 
 #: core/models.py:731
 msgid "Template"
-msgstr "Vorlage"
+msgstr ""
 
 #: core/models.py:732
 msgid "Templates"
-msgstr "Vorlagen"
+msgstr ""
 
 #: core/models.py:871
 msgid "Template/user relation"
-msgstr "Vorlage/Benutzer-Beziehung"
+msgstr ""
 
 #: core/models.py:872
 msgid "Template/user relations"
-msgstr "Vorlage/Benutzerbeziehungen"
+msgstr ""
 
 #: core/models.py:878
 msgid "This user is already in this template."
-msgstr "Dieser Benutzer ist bereits in dieser Vorlage."
+msgstr ""
 
 #: core/models.py:884
 msgid "This team is already in this template."
-msgstr "Dieses Team ist bereits in diesem Template."
+msgstr ""
 
 #: core/models.py:907
 msgid "email address"
-msgstr "E-Mail-Adresse"
+msgstr ""
 
 #: core/models.py:926
 msgid "Document invitation"
-msgstr "Einladung zum Dokument"
+msgstr ""
 
 #: core/models.py:927
 msgid "Document invitations"
-msgstr "Dokumenteinladungen"
+msgstr ""
 
 #: core/models.py:944
 msgid "This email is already associated to a registered user."
-msgstr "Diese E-Mail ist bereits einem registrierten Benutzer zugeordnet."
+msgstr ""
 
 #: core/templates/mail/html/hello.html:159 core/templates/mail/text/hello.txt:3
 msgid "Company logo"
-msgstr "Unternehmens-Logo"
+msgstr ""
 
 #: core/templates/mail/html/hello.html:188 core/templates/mail/text/hello.txt:5
 #, python-format
 msgid "Hello %(name)s"
-msgstr "Guten Tag %(name)s!"
+msgstr ""
 
 #: core/templates/mail/html/hello.html:188 core/templates/mail/text/hello.txt:5
 msgid "Hello"
-msgstr "Hallo"
+msgstr ""
 
 #: core/templates/mail/html/hello.html:189 core/templates/mail/text/hello.txt:6
 msgid "Thank you very much for your visit!"
-msgstr "Vielen Dank für Ihren Besuch!"
+msgstr ""
 
 #: core/templates/mail/html/hello.html:221
 #, python-format
 msgid "This mail has been sent to %(email)s by <a href=\"%(href)s\">%(name)s</a>"
-msgstr "Diese E-Mail wurde an %(email)s von <a href=\"%(href)s\">%(name)s</a> gesendet"
+msgstr ""
 
 #: core/templates/mail/html/invitation.html:162
 #: core/templates/mail/text/invitation.txt:3
 msgid "Logo email"
-msgstr "Logo-E-Mail"
+msgstr ""
 
 #: core/templates/mail/html/invitation.html:209
 #: core/templates/mail/text/invitation.txt:10
 msgid "Open"
-msgstr "Öffnen"
+msgstr ""
 
 #: core/templates/mail/html/invitation.html:226
 #: core/templates/mail/text/invitation.txt:14
 msgid " Docs, your new essential tool for organizing, sharing and collaborating on your documents as a team. "
-msgstr " Docs, Ihr neues unentbehrliches Werkzeug für die Organisation, den Austausch und die Zusammenarbeit in Ihren Dokumenten als Team. "
+msgstr ""
 
 #: core/templates/mail/html/invitation.html:233
 #: core/templates/mail/text/invitation.txt:16
 #, python-format
 msgid " Brought to you by %(brandname)s "
-msgstr " Erstellt von %(brandname)s "
+msgstr ""
 
 #: core/templates/mail/text/hello.txt:8
 #, python-format
 msgid "This mail has been sent to %(email)s by %(name)s [%(href)s]"
-msgstr "Diese E-Mail wurde an %(email)s von %(name)s [%(href)s ] gesendet"
+msgstr ""
 
 #: impress/settings.py:236
 msgid "English"
-msgstr "Englisch"
+msgstr ""
 
 #: impress/settings.py:237
 msgid "French"
-msgstr "Französisch"
+msgstr ""
 
 #: impress/settings.py:238
 msgid "German"
-msgstr "Deutsch"
+msgstr ""
 

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "impress"
-version = "2.0.0"
+version = "1.10.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.12"
 dependencies = [
-    "boto3==1.35.90",
+    "boto3==1.35.81",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
@@ -47,7 +47,7 @@ dependencies = [
     "jsonschema==4.23.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "openai==1.58.1",
+    "openai==1.57.4",
     "psycopg[binary]==3.2.3",
     "PyJWT==2.10.1",
     "pypandoc==1.14",
@@ -73,17 +73,17 @@ dev = [
     "drf-spectacular-sidecar==2024.12.1",
     "freezegun==1.5.1",
     "ipdb==0.13.13",
-    "ipython==8.31.0",
+    "ipython==8.30.0",
     "pyfakefs==5.7.3",
     "pylint-django==2.6.1",
-    "pylint==3.3.3",
+    "pylint==3.3.2",
     "pytest-cov==6.0.0",
     "pytest-django==4.9.0",
     "pytest==8.3.4",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.8.4",
+    "ruff==0.8.3",
     "types-requests==2.32.0.20241016",
 ]
 

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

@@ -36,25 +36,18 @@ export const createDoc = async (
 
     await page
       .getByRole('button', {
-        name: 'New doc',
+        name: 'Create a new document',
       })
       .click();
 
-    const input = page.getByRole('textbox', { name: 'doc title input' });
-    await input.click();
-    await input.fill(randomDocs[i]);
-    await input.blur();
+    await page.getByRole('heading', { name: 'Untitled document' }).click();
+    await page.keyboard.type(randomDocs[i]);
+    await page.getByText('Created at ').click();
   }
 
   return randomDocs;
 };
 
-export const verifyDocName = async (page: Page, docName: string) => {
-  const input = page.getByRole('textbox', { name: 'doc title input' });
-  await expect(input).toBeVisible();
-  await expect(input).toHaveText(docName);
-};
-
 export const addNewMember = async (
   page: Page,
   index: number,
@@ -67,9 +60,7 @@ export const addNewMember = async (
       response.status() === 200,
   );
 
-  const inputSearch = page.getByRole('combobox', {
-    name: 'Quick search input',
-  });
+  const inputSearch = page.getByLabel(/Find a member to add to the document/);
 
   // Select a new user
   await inputSearch.fill(fillText);
@@ -84,9 +75,13 @@ export const addNewMember = async (
   await page.getByRole('option', { name: users[index].email }).click();
 
   // Choose a role
-  await page.getByLabel('doc-role-dropdown').click();
-  await page.getByRole('button', { name: role }).click();
-  await page.getByRole('button', { name: 'Invite' }).click();
+  await page.getByRole('combobox', { name: /Choose a role/ }).click();
+  await page.getByRole('option', { name: role }).click();
+  await page.getByRole('button', { name: 'Validate' }).click();
+
+  await expect(
+    page.getByText(`User ${users[index].email} added to the document.`),
+  ).toBeVisible();
 
   return users[index].email;
 };
@@ -102,22 +97,24 @@ export const goToGridDoc = async (
   const header = page.locator('header').first();
   await header.locator('h2').getByText('Docs').click();
 
-  const docsGrid = page.getByTestId('docs-grid');
-  await expect(docsGrid).toBeVisible();
-  await expect(docsGrid.getByTestId('grid-loader')).toBeHidden();
+  const datagrid = page.getByLabel('Datagrid of the documents page 1');
+  const datagridTable = datagrid.getByRole('table');
 
-  const rows = docsGrid.getByRole('row');
+  await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+    timeout: 10000,
+  });
 
+  const rows = datagridTable.getByRole('row');
   const row = title
     ? rows.filter({
         hasText: title,
       })
     : rows.nth(nthRow);
 
-  await expect(row).toBeVisible();
+  const docTitleCell = row.getByRole('cell').nth(1);
+
+  const docTitle = await docTitleCell.textContent();
 
-  const docTitleContent = row.locator('[aria-describedby="doc-title"]').first();
-  const docTitle = await docTitleContent.textContent();
   expect(docTitle).toBeDefined();
 
   await row.getByRole('link').first().click();

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

@@ -2,7 +2,7 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './common';
+import { createDoc } from './common';
 
 const config = {
   CRISP_WEBSITE_ID: null,
@@ -129,8 +129,7 @@ test.describe('Config', () => {
       browserName,
       1,
     );
-
-    await verifyDocName(page, randomDoc[0]);
+    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
 
     const webSocket = await webSocketPromise;
     expect(webSocket.url()).toContain('ws://localhost:8083/collaboration/ws/');

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

@@ -1,12 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import {
-  createDoc,
-  goToGridDoc,
-  keyCloakSignIn,
-  randomName,
-  verifyDocName,
-} from './common';
+import { createDoc, goToGridDoc, keyCloakSignIn, randomName } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -24,12 +18,15 @@ test.describe('Doc Create', () => {
     const header = page.locator('header').first();
     await header.locator('h2').getByText('Docs').click();
 
-    await expect(page.getByTestId('grid-loader')).toBeVisible();
+    const datagrid = page.getByLabel('Datagrid of the documents page 1');
+    const datagridTable = datagrid.getByRole('table');
 
-    const docsGrid = page.getByTestId('docs-grid');
-    await expect(docsGrid).toBeVisible();
-    await expect(page.getByTestId('grid-loader')).toBeHidden();
-    await expect(docsGrid.getByText(docTitle)).toBeVisible();
+    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+      timeout: 10000,
+    });
+    await expect(datagridTable.getByText(docTitle)).toBeVisible({
+      timeout: 5000,
+    });
   });
 });
 
@@ -67,7 +64,7 @@ test.describe('Doc Create: Not loggued', () => {
 
     await goToGridDoc(page, { title });
 
-    await verifyDocName(page, title);
+    await expect(page.getByRole('heading', { name: title })).toBeVisible();
 
     const editor = page.locator('.ProseMirror');
     await expect(editor.getByText('This is a normal text')).toBeVisible();

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

@@ -2,12 +2,7 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 
-import {
-  createDoc,
-  goToGridDoc,
-  mockedDocument,
-  verifyDocName,
-} from './common';
+import { createDoc, goToGridDoc, mockedDocument } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -103,7 +98,7 @@ test.describe('Doc Editor', () => {
     });
 
     const randomDoc = await createDoc(page, 'doc-editor', browserName, 1);
-    await verifyDocName(page, randomDoc[0]);
+    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
 
     let webSocket = await webSocketPromise;
     expect(webSocket.url()).toContain(
@@ -121,15 +116,17 @@ test.describe('Doc Editor', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    const selectVisibility = page.getByRole('combobox', {
+      name: 'Visibility',
+    });
 
     // When the visibility is changed, the ws should closed the connection (backend signal)
     const wsClosePromise = webSocket.waitForEvent('close');
 
     await selectVisibility.click();
     await page
-      .getByRole('button', {
-        name: 'Connected',
+      .getByRole('option', {
+        name: 'Authenticated',
       })
       .click();
 
@@ -156,7 +153,7 @@ test.describe('Doc Editor', () => {
   }) => {
     const randomDoc = await createDoc(page, 'doc-markdown', browserName, 1);
 
-    await verifyDocName(page, randomDoc[0]);
+    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -181,7 +178,7 @@ test.describe('Doc Editor', () => {
   }) => {
     // Check the first doc
     const [firstDoc] = await createDoc(page, 'doc-switch-1', browserName, 1);
-    await verifyDocName(page, firstDoc);
+    await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -190,8 +187,7 @@ test.describe('Doc Editor', () => {
 
     // Check the second doc
     const [secondDoc] = await createDoc(page, 'doc-switch-2', browserName, 1);
-    await verifyDocName(page, secondDoc);
-
+    await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
     await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
     await editor.click();
     await editor.fill('Hello World Doc 2');
@@ -201,18 +197,9 @@ test.describe('Doc Editor', () => {
     await goToGridDoc(page, {
       title: firstDoc,
     });
-    await verifyDocName(page, firstDoc);
+    await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
     await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
     await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
-
-    await page
-      .getByRole('button', {
-        name: 'New doc',
-      })
-      .click();
-
-    await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
-    await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
   });
 
   test('it saves the doc when we change pages', async ({
@@ -221,7 +208,7 @@ test.describe('Doc Editor', () => {
   }) => {
     // Check the first doc
     const [doc] = await createDoc(page, 'doc-saves-change', browserName, 1);
-    await verifyDocName(page, doc);
+    await expect(page.locator('h2').getByText(doc)).toBeVisible();
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -232,7 +219,7 @@ test.describe('Doc Editor', () => {
       nthRow: 2,
     });
 
-    await verifyDocName(page, secondDoc);
+    await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
 
     await goToGridDoc(page, {
       title: doc,
@@ -246,9 +233,8 @@ test.describe('Doc Editor', () => {
     test.skip(browserName === 'webkit', 'This test is very flaky with webkit');
 
     // Check the first doc
-    const doc = await goToGridDoc(page);
-
-    await verifyDocName(page, doc);
+    const [doc] = await createDoc(page, 'doc-quit-1', browserName, 1);
+    await expect(page.locator('h2').getByText(doc)).toBeVisible();
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -281,10 +267,9 @@ test.describe('Doc Editor', () => {
 
     await goToGridDoc(page);
 
-    const card = page.getByLabel('It is the card information');
-    await expect(card).toBeVisible();
-
-    await expect(card.getByText('Reader')).toBeVisible();
+    await expect(
+      page.getByText('Read only, you cannot edit this document.'),
+    ).toBeVisible();
   });
 
   test('it adds an image to the doc editor', async ({ page, browserName }) => {

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

@@ -3,44 +3,13 @@ import cs from 'convert-stream';
 import jsdom from 'jsdom';
 import pdf from 'pdf-parse';
 
-import { createDoc, verifyDocName } from './common';
+import { createDoc } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
 test.describe('Doc Export', () => {
-  test('it check if all elements are visible', async ({
-    page,
-    browserName,
-  }) => {
-    await createDoc(page, 'doc-editor', browserName, 1);
-    await page
-      .getByRole('button', {
-        name: 'download',
-      })
-      .click();
-
-    await expect(
-      page
-        .locator('div')
-        .filter({ hasText: /^Download$/ })
-        .first(),
-    ).toBeVisible();
-    await expect(
-      page.getByText(
-        'Upload your docs to a Microsoft Word, Open Office or PDF document',
-      ),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('combobox', { name: 'Template' }),
-    ).toBeVisible();
-    await expect(page.getByRole('combobox', { name: 'Format' })).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Close the modal' }),
-    ).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Download' })).toBeVisible();
-  });
   test('it converts the doc to pdf with a template integrated', async ({
     page,
     browserName,
@@ -51,14 +20,15 @@ test.describe('Doc Export', () => {
       return download.suggestedFilename().includes(`${randomDoc}.pdf`);
     });
 
-    await verifyDocName(page, randomDoc);
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
 
     await page.locator('.ProseMirror.bn-editor').click();
     await page.locator('.ProseMirror.bn-editor').fill('Hello World');
 
+    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export',
       })
       .click();
 
@@ -87,19 +57,19 @@ test.describe('Doc Export', () => {
       return download.suggestedFilename().includes(`${randomDoc}.docx`);
     });
 
-    await verifyDocName(page, randomDoc);
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
 
     await page.locator('.ProseMirror.bn-editor').click();
     await page.locator('.ProseMirror.bn-editor').fill('Hello World');
 
+    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export',
       })
       .click();
 
-    await page.getByRole('combobox', { name: 'Format' }).click();
-    await page.getByRole('option', { name: 'Word / Open Office' }).click();
+    await page.getByText('Docx').click();
 
     await page
       .getByRole('button', {
@@ -127,7 +97,7 @@ test.describe('Doc Export', () => {
       await route.continue();
     });
 
-    await verifyDocName(page, randomDoc);
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
 
     await page.locator('.bn-block-outer').last().fill('Hello World');
     await page.locator('.bn-block-outer').last().click();
@@ -220,9 +190,10 @@ test.describe('Doc Export', () => {
       .click();
 
     // Download
+    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export',
       })
       .click();
 

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

@@ -1,75 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { createDoc, verifyDocName } from './common';
-
-type SmallDoc = {
-  id: string;
-  title: string;
-};
-
-test.describe('Document favorite', () => {
-  test('it check the favorite workflow', async ({ page, browserName }) => {
-    const id = Math.random().toString(7);
-    await page.goto('/');
-
-    // Create document
-    const createdDoc = await createDoc(page, `Doc ${id}`, browserName, 1);
-    await verifyDocName(page, createdDoc[0]);
-
-    // Reload page
-    await page.reload();
-    await page.goto('/');
-
-    // Get all documents
-    let docs: SmallDoc[] = [];
-    const response = await page.waitForResponse(
-      (response) =>
-        response.url().endsWith('documents/?page=1') &&
-        response.status() === 200,
-    );
-    const result = await response.json();
-    docs = result.results as SmallDoc[];
-    const docsGrid = page.getByTestId('docs-grid');
-    await docsGrid.getByRole('heading', { name: 'All docs' }).click();
-    await expect(docsGrid.getByText(`Doc ${id}`)).toBeVisible();
-    const doc = docs.find((doc) => doc.title === createdDoc[0]) as SmallDoc;
-
-    // Check document
-    expect(doc).not.toBeUndefined();
-    expect(doc?.title).toBe(createdDoc[0]);
-
-    // Open document actions
-    const button = docsGrid.getByTestId(`docs-grid-actions-button-${doc.id}`);
-    await expect(button).toBeVisible();
-    await button.click();
-
-    // Pin document
-    const pinButton = page.getByTestId(`docs-grid-actions-pin-${docs[0].id}`);
-    await expect(pinButton).toBeVisible();
-    await pinButton.click();
-
-    // Check response
-    const responsePin = await page.waitForResponse(
-      (response) =>
-        response.url().includes(`documents/${doc.id}/favorite/`) &&
-        response.status() === 201,
-    );
-    expect(responsePin.ok()).toBeTruthy();
-
-    // Check left panel favorites
-    const leftPanelFavorites = page.getByTestId('left-panel-favorites');
-    await expect(leftPanelFavorites).toBeVisible();
-    await expect(leftPanelFavorites.getByText(`Doc ${id}`)).toBeVisible();
-
-    //
-    await button.click();
-    const unpinButton = page.getByTestId(
-      `docs-grid-actions-unpin-${docs[0].id}`,
-    );
-    await expect(unpinButton).toBeVisible();
-    await unpinButton.click();
-
-    // Check left panel favorites
-    await expect(leftPanelFavorites.getByText(`Doc ${id}`)).toBeHidden();
-  });
-});

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

@@ -1,14 +1,264 @@
 import { expect, test } from '@playwright/test';
 
-type SmallDoc = {
-  id: string;
-  title: string;
-};
-
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
+test.describe('Documents Grid', () => {
+  test('checks all the elements are visible', async ({ page }) => {
+    await expect(page.locator('h2').getByText('Documents')).toBeVisible();
+
+    const datagrid = page
+      .getByLabel('Datagrid of the documents page 1')
+      .getByRole('table');
+
+    const thead = datagrid.locator('thead');
+    await expect(thead.getByText(/Document name/i)).toBeVisible();
+    await expect(thead.getByText(/Created at/i)).toBeVisible();
+    await expect(thead.getByText(/Updated at/i)).toBeVisible();
+    await expect(thead.getByText(/Your role/i)).toBeVisible();
+    await expect(thead.getByText(/Members/i)).toBeVisible();
+
+    const row1 = datagrid.getByRole('row').nth(1).getByRole('cell');
+    const docName = await row1.nth(1).textContent();
+    expect(docName).toBeDefined();
+
+    const docCreatedAt = await row1.nth(2).textContent();
+    expect(docCreatedAt).toBeDefined();
+
+    const docUpdatedAt = await row1.nth(3).textContent();
+    expect(docUpdatedAt).toBeDefined();
+
+    const docRole = await row1.nth(4).textContent();
+    expect(
+      docRole &&
+        ['Administrator', 'Owner', 'Reader', 'Editor'].includes(docRole),
+    ).toBeTruthy();
+
+    const docUserNumber = await row1.nth(5).textContent();
+    expect(docUserNumber).toBeDefined();
+
+    // Open the document
+    await row1.nth(1).click();
+
+    await expect(page.locator('h2').getByText(docName!)).toBeVisible();
+  });
+
+  [
+    {
+      nameColumn: 'Document name',
+      ordering: 'title',
+      cellNumber: 1,
+      orderDefault: '',
+      orderDesc: '&ordering=-title',
+      orderAsc: '&ordering=title',
+      defaultColumn: false,
+    },
+    {
+      nameColumn: 'Created at',
+      ordering: 'created_at',
+      cellNumber: 2,
+      orderDefault: '',
+      orderDesc: '&ordering=-created_at',
+      orderAsc: '&ordering=created_at',
+      defaultColumn: false,
+    },
+    {
+      nameColumn: 'Updated at',
+      ordering: 'updated_at',
+      cellNumber: 3,
+      orderDefault: '&ordering=-updated_at',
+      orderDesc: '&ordering=updated_at',
+      orderAsc: '',
+      defaultColumn: true,
+    },
+  ].forEach(
+    ({
+      nameColumn,
+      ordering,
+      cellNumber,
+      orderDefault,
+      orderDesc,
+      orderAsc,
+      defaultColumn,
+    }) => {
+      test(`checks datagrid ordering ${ordering}`, async ({ page }) => {
+        const responsePromise = page.waitForResponse(
+          (response) =>
+            response.url().includes(`/documents/?page=1${orderDefault}`) &&
+            response.status() === 200,
+        );
+
+        const responsePromiseOrderingDesc = page.waitForResponse(
+          (response) =>
+            response.url().includes(`/documents/?page=1${orderDesc}`) &&
+            response.status() === 200,
+        );
+
+        const responsePromiseOrderingAsc = page.waitForResponse(
+          (response) =>
+            response.url().includes(`/documents/?page=1${orderAsc}`) &&
+            response.status() === 200,
+        );
+
+        // Checks the initial state
+        const datagrid = page.getByLabel('Datagrid of the documents page 1');
+        const datagridTable = datagrid.getByRole('table');
+        const thead = datagridTable.locator('thead');
+
+        const response = await responsePromise;
+        expect(response.ok()).toBeTruthy();
+
+        const docNameRow1 = datagridTable
+          .getByRole('row')
+          .nth(1)
+          .getByRole('cell')
+          .nth(cellNumber);
+        const docNameRow2 = datagridTable
+          .getByRole('row')
+          .nth(2)
+          .getByRole('cell')
+          .nth(cellNumber);
+
+        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+          timeout: 10000,
+        });
+
+        // Initial state
+        await expect(docNameRow1).toHaveText(/.*/);
+        await expect(docNameRow2).toHaveText(/.*/);
+        const initialDocNameRow1 = await docNameRow1.textContent();
+        const initialDocNameRow2 = await docNameRow2.textContent();
+
+        expect(initialDocNameRow1).toBeDefined();
+        expect(initialDocNameRow2).toBeDefined();
+
+        // Ordering ASC
+        await thead.getByText(nameColumn).click();
+
+        const responseOrderingAsc = await responsePromiseOrderingAsc;
+        expect(responseOrderingAsc.ok()).toBeTruthy();
+
+        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+          timeout: 10000,
+        });
+
+        await expect(docNameRow1).toHaveText(/.*/);
+        await expect(docNameRow2).toHaveText(/.*/);
+        const textDocNameRow1Asc = await docNameRow1.textContent();
+        const textDocNameRow2Asc = await docNameRow2.textContent();
+
+        const compare = (comp1: string, comp2: string) => {
+          const comparisonResult = comp1.localeCompare(comp2, 'en', {
+            caseFirst: 'false',
+            ignorePunctuation: true,
+          });
+
+          // eslint-disable-next-line playwright/no-conditional-in-test
+          return defaultColumn ? comparisonResult >= 0 : comparisonResult <= 0;
+        };
+
+        expect(
+          textDocNameRow1Asc &&
+            textDocNameRow2Asc &&
+            compare(textDocNameRow1Asc, textDocNameRow2Asc),
+        ).toBeTruthy();
+
+        // Ordering Desc
+        await thead.getByText(nameColumn).click();
+
+        const responseOrderingDesc = await responsePromiseOrderingDesc;
+        expect(responseOrderingDesc.ok()).toBeTruthy();
+
+        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+          timeout: 10000,
+        });
+
+        await expect(docNameRow1).toHaveText(/.*/);
+        await expect(docNameRow2).toHaveText(/.*/);
+        const textDocNameRow1Desc = await docNameRow1.textContent();
+        const textDocNameRow2Desc = await docNameRow2.textContent();
+
+        expect(
+          textDocNameRow1Desc &&
+            textDocNameRow2Desc &&
+            compare(textDocNameRow2Desc, textDocNameRow1Desc),
+        ).toBeTruthy();
+      });
+    },
+  );
+
+  test('checks the pagination', async ({ page }) => {
+    const responsePromisePage1 = page.waitForResponse(
+      (response) =>
+        response.url().includes(`/documents/?page=1`) &&
+        response.status() === 200,
+    );
+
+    const responsePromisePage2 = page.waitForResponse(
+      (response) =>
+        response.url().includes(`/documents/?page=2`) &&
+        response.status() === 200,
+    );
+
+    const datagridPage1 = page
+      .getByLabel('Datagrid of the documents page 1')
+      .getByRole('table');
+
+    const responsePage1 = await responsePromisePage1;
+    expect(responsePage1.ok()).toBeTruthy();
+
+    await expect(
+      datagridPage1.getByRole('row').nth(1).getByRole('cell').nth(1),
+    ).toHaveText(/.*/);
+
+    await page.getByLabel('Go to page 2').click();
+
+    const datagridPage2 = page
+      .getByLabel('Datagrid of the documents page 2')
+      .getByRole('table');
+
+    const responsePage2 = await responsePromisePage2;
+    expect(responsePage2.ok()).toBeTruthy();
+
+    await expect(
+      datagridPage2.getByRole('row').nth(1).getByRole('cell').nth(1),
+    ).toHaveText(/.*/);
+  });
+
+  test('it deletes the document', async ({ page }) => {
+    const datagrid = page
+      .getByLabel('Datagrid of the documents page 1')
+      .getByRole('table');
+
+    const docRow = datagrid.getByRole('row').nth(1).getByRole('cell');
+
+    const docName = await docRow.nth(1).textContent();
+
+    await docRow
+      .getByRole('button', {
+        name: 'Delete the document',
+      })
+      .click();
+
+    await expect(
+      page.locator('h2').getByText(`Deleting the document "${docName}"`),
+    ).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Confirm deletion',
+      })
+      .click();
+
+    await expect(
+      page.getByText('The document has been deleted.'),
+    ).toBeVisible();
+
+    await expect(datagrid.getByText(docName!)).toBeHidden();
+  });
+});
+
 test.describe('Documents Grid mobile', () => {
   test.use({ viewport: { width: 500, height: 1200 } });
 
@@ -76,256 +326,19 @@ test.describe('Documents Grid mobile', () => {
 
     await page.goto('/');
 
-    const docsGrid = page.getByTestId('docs-grid');
-    await expect(docsGrid).toBeVisible();
-    await expect(page.getByTestId('grid-loader')).toBeHidden();
+    const datagrid = page.getByLabel('Datagrid of the documents page 1');
+    const tableDatagrid = datagrid.getByRole('table');
 
-    const rows = docsGrid.getByRole('row');
+    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+      timeout: 10000,
+    });
+
+    const rows = tableDatagrid.getByRole('row');
     const row = rows.filter({
       hasText: 'My mocked document',
     });
 
-    await expect(
-      row.locator('[aria-describedby="doc-title"]').nth(0),
-    ).toHaveText('My mocked document');
-  });
-});
-
-test.describe('Document grid item options', () => {
-  test('it deletes the document', async ({ page }) => {
-    let docs: SmallDoc[] = [];
-    const response = await page.waitForResponse(
-      (response) =>
-        response.url().endsWith('documents/?page=1') &&
-        response.status() === 200,
-    );
-    const result = await response.json();
-    docs = result.results as SmallDoc[];
-
-    const button = page.getByTestId(`docs-grid-actions-button-${docs[0].id}`);
-    await expect(button).toBeVisible();
-    await button.click();
-
-    const removeButton = page.getByTestId(
-      `docs-grid-actions-remove-${docs[0].id}`,
-    );
-    await expect(removeButton).toBeVisible();
-    await removeButton.click();
-
-    await expect(
-      page.getByRole('heading', { name: 'Delete a doc' }),
-    ).toBeVisible();
-
-    await page
-      .getByRole('button', {
-        name: 'Confirm deletion',
-      })
-      .click();
-
-    const refetchResponse = await page.waitForResponse(
-      (response) =>
-        response.url().endsWith('documents/?page=1') &&
-        response.status() === 200,
-    );
-
-    const resultRefetch = await refetchResponse.json();
-    expect(resultRefetch.count).toBe(result.count - 1);
-    await expect(page.getByTestId('main-layout-loader')).toBeHidden();
-
-    await expect(
-      page.getByText('The document has been deleted.'),
-    ).toBeVisible();
-    await expect(button).toBeHidden();
-  });
-
-  test("it checks if the delete option is disabled if we don't have the destroy capability", async ({
-    page,
-  }) => {
-    await page.route('*/**/api/v1.0/documents/?page=1', async (route) => {
-      await route.fulfill({
-        json: {
-          results: [
-            {
-              id: 'mocked-document-id',
-              content: '',
-              title: 'Mocked document',
-              accesses: [],
-              abilities: {
-                destroy: false, // Means not owner
-                link_configuration: false,
-                versions_destroy: false,
-                versions_list: true,
-                versions_retrieve: true,
-                accesses_manage: false, // Means not admin
-                update: false,
-                partial_update: false, // Means not editor
-                retrieve: true,
-              },
-              link_reach: 'restricted',
-              created_at: '2021-09-01T09:00:00Z',
-            },
-          ],
-        },
-      });
-    });
-    await page.goto('/');
-
-    const button = page.getByTestId(
-      `docs-grid-actions-button-mocked-document-id`,
-    );
-    await expect(button).toBeVisible();
-    await button.click();
-    const removeButton = page.getByTestId(
-      `docs-grid-actions-remove-mocked-document-id`,
-    );
-    await expect(removeButton).toBeVisible();
-    await removeButton.isDisabled();
-  });
-});
-
-test.describe('Documents filters', () => {
-  test('it checks the prebuild left panel filters', async ({ page }) => {
-    // All Docs
-    await expect(page.getByTestId('grid-loader')).toBeVisible();
-    const response = await page.waitForResponse(
-      (response) =>
-        response.url().endsWith('documents/?page=1') &&
-        response.status() === 200,
-    );
-    const result = await response.json();
-    const allCount = result.count as number;
-    await expect(page.getByTestId('grid-loader')).toBeHidden();
-
-    const allDocs = page.getByLabel('All docs');
-    const myDocs = page.getByLabel('My docs');
-    const sharedWithMe = page.getByLabel('Shared with me');
-
-    // Initial state
-    await expect(allDocs).toBeVisible();
-    await expect(allDocs).toHaveCSS('background-color', 'rgb(238, 238, 238)');
-    await expect(allDocs).toHaveAttribute('aria-selected', 'true');
-
-    await expect(myDocs).toBeVisible();
-    await expect(myDocs).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
-    await expect(myDocs).toHaveAttribute('aria-selected', 'false');
-
-    await expect(sharedWithMe).toBeVisible();
-    await expect(sharedWithMe).toHaveCSS(
-      'background-color',
-      'rgba(0, 0, 0, 0)',
-    );
-    await expect(sharedWithMe).toHaveAttribute('aria-selected', 'false');
-
-    await allDocs.click();
-
-    let url = new URL(page.url());
-    let target = url.searchParams.get('target');
-    expect(target).toBe('all_docs');
-
-    // My docs
-    await myDocs.click();
-    url = new URL(page.url());
-    target = url.searchParams.get('target');
-    expect(target).toBe('my_docs');
-    await expect(page.getByTestId('grid-loader')).toBeVisible();
-    const responseMyDocs = await page.waitForResponse(
-      (response) =>
-        response.url().endsWith('documents/?page=1&is_creator_me=true') &&
-        response.status() === 200,
-    );
-    const resultMyDocs = await responseMyDocs.json();
-    const countMyDocs = resultMyDocs.count as number;
-    await expect(page.getByTestId('grid-loader')).toBeHidden();
-    expect(countMyDocs).toBeLessThanOrEqual(allCount);
-
-    // Shared with me
-    await sharedWithMe.click();
-    url = new URL(page.url());
-    target = url.searchParams.get('target');
-    expect(target).toBe('shared_with_me');
-    await expect(page.getByTestId('grid-loader')).toBeVisible();
-    const responseSharedWithMe = await page.waitForResponse(
-      (response) =>
-        response.url().includes('documents/?page=1&is_creator_me=false') &&
-        response.status() === 200,
-    );
-    const resultSharedWithMe = await responseSharedWithMe.json();
-    const countSharedWithMe = resultSharedWithMe.count as number;
-    await expect(page.getByTestId('grid-loader')).toBeHidden();
-    expect(countSharedWithMe).toBeLessThanOrEqual(allCount);
-    expect(countSharedWithMe + countMyDocs).toEqual(allCount);
-  });
-});
-
-test.describe('Documents Grid', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-  });
-
-  test('checks all the elements are visible', async ({ page }) => {
-    let docs: SmallDoc[] = [];
-    await expect(page.getByTestId('grid-loader')).toBeVisible();
-
-    const response = await page.waitForResponse(
-      (response) =>
-        response.url().endsWith('documents/?page=1') &&
-        response.status() === 200,
-    );
-    const result = await response.json();
-    docs = result.results as SmallDoc[];
-
-    await expect(page.getByTestId('grid-loader')).toBeHidden();
-    await expect(page.locator('h4').getByText('All docs')).toBeVisible();
-
-    const thead = page.getByTestId('docs-grid-header');
-    await expect(thead.getByText(/Name/i)).toBeVisible();
-    await expect(thead.getByText(/Updated at/i)).toBeVisible();
-
-    await Promise.all(
-      docs.map(async (doc) => {
-        await expect(
-          page.getByTestId(`docs-grid-name-${doc.id}`),
-        ).toBeVisible();
-      }),
-    );
-  });
-
-  test('checks the infinite scroll', async ({ page }) => {
-    let docs: SmallDoc[] = [];
-    const responsePromisePage1 = page.waitForResponse(
-      (response) =>
-        response.url().endsWith(`/documents/?page=1`) &&
-        response.status() === 200,
-    );
-
-    const responsePromisePage2 = page.waitForResponse(
-      (response) =>
-        response.url().endsWith(`/documents/?page=2`) &&
-        response.status() === 200,
-    );
-
-    const responsePage1 = await responsePromisePage1;
-    expect(responsePage1.ok()).toBeTruthy();
-    let result = await responsePage1.json();
-    docs = result.results as SmallDoc[];
-    await Promise.all(
-      docs.map(async (doc) => {
-        await expect(
-          page.getByTestId(`docs-grid-name-${doc.id}`),
-        ).toBeVisible();
-      }),
-    );
-
-    await page.getByTestId('infinite-scroll-trigger').scrollIntoViewIfNeeded();
-    const responsePage2 = await responsePromisePage2;
-    result = await responsePage2.json();
-    docs = result.results as SmallDoc[];
-    await Promise.all(
-      docs.map(async (doc) => {
-        await expect(
-          page.getByTestId(`docs-grid-name-${doc.id}`),
-        ).toBeVisible();
-      }),
-    );
+    await expect(row.getByRole('cell').nth(0)).toHaveText('My mocked document');
+    await expect(row.getByRole('cell').nth(1)).toHaveText('Public');
   });
 });

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

@@ -6,7 +6,6 @@ import {
   mockedAccesses,
   mockedDocument,
   mockedInvitations,
-  verifyDocName,
 } from './common';
 
 test.beforeEach(async ({ page }) => {
@@ -60,31 +59,84 @@ test.describe('Doc Header', () => {
     const card = page.getByLabel(
       'It is the card information about the document.',
     );
-
-    const docTitle = card.getByRole('textbox', { name: 'doc title input' });
-    await expect(docTitle).toBeVisible();
-
-    await expect(card.getByText('Public document')).toBeVisible();
-
-    await expect(card.getByText('Owner ·')).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(card.locator('a').getByText('home')).toBeVisible();
+    await expect(card.locator('h2').getByText('Mocked document')).toBeVisible();
+    await expect(card.getByText('Public')).toBeVisible();
     await expect(
-      page.getByRole('button', { name: 'Open the document options' }),
+      card.getByText('Created at 09/01/2021, 11:00 AM'),
     ).toBeVisible();
+    await expect(card.getByText('Your role: Owner')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
   });
 
   test('it updates the title doc', async ({ page, browserName }) => {
-    await createDoc(page, 'doc-update', browserName, 1);
-    const docTitle = page.getByRole('textbox', { name: 'doc title input' });
-    await expect(docTitle).toBeVisible();
-    await docTitle.fill('Hello World');
-    await docTitle.blur();
-    await verifyDocName(page, 'Hello World');
+    const [randomDoc] = await createDoc(page, 'doc-update', browserName, 1);
+
+    await page.getByRole('heading', { name: randomDoc }).fill(' ');
+    await page.getByText('Created at').click();
+
+    await expect(
+      page.getByRole('heading', { name: 'Untitled document' }),
+    ).toBeVisible();
+  });
+
+  test('it updates the title doc from editor heading', async ({ page }) => {
+    await page
+      .getByRole('button', {
+        name: 'Create a new document',
+      })
+      .click();
+
+    const docHeader = page.getByLabel(
+      'It is the card information about the document.',
+    );
+
+    await expect(
+      docHeader.getByRole('heading', { name: 'Untitled document', level: 2 }),
+    ).toBeVisible();
+
+    const editor = page.locator('.ProseMirror');
+
+    await editor.locator('h1').click();
+    await page.keyboard.type('Hello World', { delay: 100 });
+
+    await expect(
+      docHeader.getByRole('heading', { name: 'Hello World', level: 2 }),
+    ).toBeVisible();
+
+    await expect(
+      page.getByText('Document title updated successfully'),
+    ).toBeVisible();
+
+    await docHeader
+      .getByRole('heading', { name: 'Hello World', level: 2 })
+      .fill('Top World');
+
+    await editor.locator('h1').fill('Super World');
+
+    await expect(
+      docHeader.getByRole('heading', { name: 'Top World', level: 2 }),
+    ).toBeVisible();
+
+    await editor.locator('h1').fill('');
+
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(500);
+
+    await docHeader
+      .getByRole('heading', { name: 'Top World', level: 2 })
+      .fill(' ');
+
+    await page.getByText('Created at').click();
+
+    await expect(
+      docHeader.getByRole('heading', { name: 'Untitled  document', level: 2 }),
+    ).toBeVisible();
   });
 
   test('it deletes the doc', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -94,13 +146,7 @@ test.describe('Doc Header', () => {
       .click();
 
     await expect(
-      page.getByRole('heading', { name: 'Delete a doc' }),
-    ).toBeVisible();
-
-    await expect(
-      page.getByText(
-        `Are you sure you want to delete the document "${randomDoc}"?`,
-      ),
+      page.locator('h2').getByText(`Deleting the document "${randomDoc}"`),
     ).toBeVisible();
 
     await page
@@ -113,7 +159,9 @@ test.describe('Doc Header', () => {
       page.getByText('The document has been deleted.'),
     ).toBeVisible();
 
-    await expect(page.getByRole('button', { name: 'New do' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Create a new document' }),
+    ).toBeVisible();
 
     const row = page
       .getByLabel('Datagrid of the documents page 1')
@@ -147,13 +195,16 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.locator('h2').getByText('Mocked document'),
+    ).toHaveAttribute('contenteditable');
 
     await page.getByLabel('Open the document options').click();
 
+    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Delete document' }),
-    ).toBeDisabled();
+    ).toBeHidden();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -161,40 +212,34 @@ test.describe('Doc Header', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     const shareModal = page.getByLabel('Share modal');
-    await expect(shareModal).toBeVisible();
-    await expect(page.getByText('Share the document')).toBeVisible();
 
-    await expect(page.getByPlaceholder('Type a name or email')).toBeVisible();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).not.toHaveAttribute('disabled');
+    await expect(shareModal.getByText('Search by email')).toBeVisible();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
-    await expect(invitationCard).toBeVisible();
     await expect(
-      invitationCard.getByText('test@invitation.test').first(),
+      invitationCard.getByText('test@invitation.test'),
     ).toBeVisible();
-    await expect(invitationCard.getByLabel('doc-role-dropdown')).toBeVisible();
-
-    await invitationCard.getByRole('button', { name: 'more_horiz' }).click();
-
     await expect(
-      page.getByRole('button', {
+      invitationCard.getByRole('combobox', { name: 'Role' }),
+    ).toBeEnabled();
+    await expect(
+      invitationCard.getByRole('button', {
         name: 'delete',
       }),
     ).toBeEnabled();
-    await invitationCard.click();
 
     const memberCard = shareModal.getByLabel('List members card');
-    await expect(memberCard).toBeVisible();
+    await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
     await expect(
-      memberCard.getByText('test@accesses.test').first(),
-    ).toBeVisible();
-    await expect(memberCard.getByLabel('doc-role-dropdown')).toBeVisible();
+      memberCard.getByRole('combobox', { name: 'Role' }),
+    ).toBeEnabled();
     await expect(
-      memberCard.getByRole('button', { name: 'more_horiz' }),
-    ).toBeVisible();
-    await memberCard.getByRole('button', { name: 'more_horiz' }).click();
-
-    await expect(
-      page.getByRole('button', {
+      memberCard.getByRole('button', {
         name: 'delete',
       }),
     ).toBeEnabled();
@@ -228,12 +273,16 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.locator('h2').getByText('Mocked document'),
+    ).toHaveAttribute('contenteditable');
+
     await page.getByLabel('Open the document options').click();
 
+    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Delete document' }),
-    ).toBeDisabled();
+    ).toBeHidden();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -241,24 +290,36 @@ test.describe('Doc Header', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     const shareModal = page.getByLabel('Share modal');
-    await expect(page.getByText('Share the document')).toBeVisible();
 
-    await expect(page.getByPlaceholder('Type a name or email')).toBeHidden();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
+    await expect(shareModal.getByText('Search by email')).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
     await expect(
-      invitationCard.getByText('test@invitation.test').first(),
+      invitationCard.getByText('test@invitation.test'),
     ).toBeVisible();
-    await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      invitationCard.getByRole('button', { name: 'more_horiz' }),
+      invitationCard.getByRole('combobox', { name: 'Role' }),
+    ).toHaveAttribute('disabled');
+    await expect(
+      invitationCard.getByRole('button', {
+        name: 'delete',
+      }),
     ).toBeHidden();
 
     const memberCard = shareModal.getByLabel('List members card');
     await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
-    await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      memberCard.getByRole('button', { name: 'more_horiz' }),
+      memberCard.getByRole('combobox', { name: 'Role' }),
+    ).toHaveAttribute('disabled');
+    await expect(
+      memberCard.getByRole('button', {
+        name: 'delete',
+      }),
     ).toBeHidden();
   });
 
@@ -290,12 +351,16 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.locator('h2').getByText('Mocked document'),
+    ).not.toHaveAttribute('contenteditable');
+
     await page.getByLabel('Open the document options').click();
 
+    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Delete document' }),
-    ).toBeDisabled();
+    ).toBeHidden();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -303,24 +368,36 @@ test.describe('Doc Header', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     const shareModal = page.getByLabel('Share modal');
-    await expect(page.getByText('Share the document')).toBeVisible();
 
-    await expect(page.getByPlaceholder('Type a name or email')).toBeHidden();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
+    await expect(shareModal.getByText('Search by email')).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
     await expect(
-      invitationCard.getByText('test@invitation.test').first(),
+      invitationCard.getByText('test@invitation.test'),
     ).toBeVisible();
-    await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      invitationCard.getByRole('button', { name: 'more_horiz' }),
+      invitationCard.getByRole('combobox', { name: 'Role' }),
+    ).toHaveAttribute('disabled');
+    await expect(
+      invitationCard.getByRole('button', {
+        name: 'delete',
+      }),
     ).toBeHidden();
 
     const memberCard = shareModal.getByLabel('List members card');
     await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
-    await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      memberCard.getByRole('button', { name: 'more_horiz' }),
+      memberCard.getByRole('combobox', { name: 'Role' }),
+    ).toHaveAttribute('disabled');
+    await expect(
+      memberCard.getByRole('button', {
+        name: 'delete',
+      }),
     ).toBeHidden();
   });
 
@@ -337,7 +414,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'New doc',
+        name: 'Create a new document',
       })
       .click();
 
@@ -372,7 +449,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'New doc',
+        name: 'Create a new document',
       })
       .click();
 
@@ -394,7 +471,9 @@ test.describe('Doc Header', () => {
       navigator.clipboard.readText(),
     );
     const clipboardContent = await handle.jsonValue();
-    expect(clipboardContent.trim()).toBe(`<h1>Hello World</h1><p></p>`);
+    expect(clipboardContent.trim()).toBe(
+      `<h1 data-level="1">Hello World</h1><p></p>`,
+    );
   });
 });
 
@@ -422,7 +501,6 @@ test.describe('Documents Header mobile', () => {
 
     await goToGridDoc(page);
 
-    await page.getByLabel('Open the document options').click();
     await page.getByRole('button', { name: 'Share' }).click();
 
     await expect(page.getByLabel('Share modal')).toBeVisible();

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

@@ -16,82 +16,163 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByRole('combobox', {
-      name: 'Quick search input',
-    });
+    const inputSearch = page.getByLabel(/Find a member to add to the document/);
     await expect(inputSearch).toBeVisible();
 
-    // Select user 1 and verify tag
+    // Select user 1
     await inputSearch.fill('user');
+
     const response = await responsePromise;
     const users = (await response.json()).results as {
       email: string;
-      full_name: string;
     }[];
 
-    const list = page.getByTestId('doc-share-add-member-list');
-    await expect(list).toBeHidden();
-    const quickSearchContent = page.getByTestId('doc-share-quick-search');
-    await quickSearchContent
-      .getByTestId(`search-user-row-${users[0].email}`)
-      .click();
+    await page.getByRole('option', { name: users[0].email }).click();
 
-    await expect(list).toBeVisible();
-    await expect(
-      list.getByTestId(`doc-share-add-member-${users[0].email}`),
-    ).toBeVisible();
-    await expect(list.getByText(`${users[0].full_name}`)).toBeVisible();
-
-    // Select user 2 and verify tag
+    // Select user 2
     await inputSearch.fill('user');
-    await quickSearchContent
-      .getByTestId(`search-user-row-${users[1].email}`)
-      .click();
+    await page.getByRole('option', { name: users[1].email }).click();
 
-    await expect(
-      list.getByTestId(`doc-share-add-member-${users[1].email}`),
-    ).toBeVisible();
-    await expect(list.getByText(`${users[1].full_name}`)).toBeVisible();
-
-    // Select email and verify tag
+    // Select email
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await quickSearchContent.getByText(email).click();
-    await expect(list.getByText(email)).toBeVisible();
+    await page.getByRole('option', { name: email }).click();
+
+    // Check user 1 tag
+    await expect(
+      page.getByText(`${users[0].email}`, { exact: true }),
+    ).toBeVisible();
+    await expect(page.getByLabel(`Remove ${users[0].email}`)).toBeVisible();
+
+    // Check user 2 tag
+    await expect(
+      page.getByText(`${users[1].email}`, { exact: true }),
+    ).toBeVisible();
+    await expect(page.getByLabel(`Remove ${users[1].email}`)).toBeVisible();
+
+    // Check invitation tag
+    await expect(page.getByText(email, { exact: true })).toBeVisible();
+    await expect(page.getByLabel(`Remove ${email}`)).toBeVisible();
 
     // Check roles are displayed
-    await list.getByLabel('doc-role-dropdown').click();
-    await expect(page.getByRole('button', { name: 'Reader' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Editor' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Owner' })).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Administrator' }),
-    ).toBeVisible();
+    await page.getByRole('combobox', { name: /Choose a role/ }).click();
 
-    // Validate
-    await page.getByRole('button', { name: 'Administrator' }).click();
-    await page.getByRole('button', { name: 'Invite' }).click();
-
-    // Check invitation added
+    await expect(page.getByRole('option', { name: 'Reader' })).toBeVisible();
+    await expect(page.getByRole('option', { name: 'Editor' })).toBeVisible();
     await expect(
-      quickSearchContent.getByText('Pending invitations'),
+      page.getByRole('option', { name: 'Administrator' }),
     ).toBeVisible();
-    await expect(quickSearchContent.getByText(email).first()).toBeVisible();
+    await expect(page.getByRole('option', { name: 'Owner' })).toBeVisible();
+  });
+
+  test('it sends a new invitation and adds a new user', async ({
+    page,
+    browserName,
+  }) => {
+    const responsePromiseSearchUser = page.waitForResponse(
+      (response) =>
+        response.url().includes('/users/?q=user') && response.status() === 200,
+    );
+
+    await createDoc(page, 'user-invitation', browserName, 1);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+
+    const email = randomName('test@test.fr', browserName, 1)[0];
+    await inputSearch.fill(email);
+    await page.getByRole('option', { name: email }).click();
+
+    // Select a new user
+    await inputSearch.fill('user');
+    const responseSearchUser = await responsePromiseSearchUser;
+    const [user] = (await responseSearchUser.json()).results as {
+      email: string;
+    }[];
+    await page.getByRole('option', { name: user.email }).click();
+
+    // Choose a role
+    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    await page.getByRole('option', { name: 'Administrator' }).click();
+
+    const responsePromiseCreateInvitation = page.waitForResponse(
+      (response) =>
+        response.url().includes('/invitations/') && response.status() === 201,
+    );
+    const responsePromiseAddUser = page.waitForResponse(
+      (response) =>
+        response.url().includes('/accesses/') && response.status() === 201,
+    );
+
+    await page.getByRole('button', { name: 'Validate' }).click();
+
+    // Check invitation sent
+    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
+    const responseCreateInvitation = await responsePromiseCreateInvitation;
+    expect(responseCreateInvitation.ok()).toBeTruthy();
+    expect(
+      responseCreateInvitation.request().headers()['content-language'],
+    ).toBe('en-us');
 
     // Check user added
-    await expect(page.getByText('Share with 3 users')).toBeVisible();
     await expect(
-      quickSearchContent.getByText(users[0].full_name).first(),
+      page.getByText(`User ${user.email} added to the document.`),
     ).toBeVisible();
+    const responseAddUser = await responsePromiseAddUser;
+    expect(responseAddUser.ok()).toBeTruthy();
+    expect(responseAddUser.request().headers()['content-language']).toBe(
+      'en-us',
+    );
+
+    const listInvitation = page.getByLabel('List invitation card');
+    await expect(listInvitation.locator('li').getByText(email)).toBeVisible();
     await expect(
-      quickSearchContent.getByText(users[0].email).first(),
+      listInvitation.locator('li').getByText('Invited'),
     ).toBeVisible();
+
+    const listMember = page.getByLabel('List members card');
+    await expect(listMember.locator('li').getByText(user.email)).toBeVisible();
+  });
+
+  test('it try to add twice the same user', async ({ page, browserName }) => {
+    const responsePromiseSearchUser = page.waitForResponse(
+      (response) =>
+        response.url().includes('/users/?q=user') && response.status() === 200,
+    );
+
+    await createDoc(page, 'user-twice', browserName, 1);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    await inputSearch.fill('user');
+    const responseSearchUser = await responsePromiseSearchUser;
+    const [user] = (await responseSearchUser.json()).results as {
+      email: string;
+    }[];
+    await page.getByRole('option', { name: user.email }).click();
+
+    // Choose a role
+    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    await page.getByRole('option', { name: 'Owner' }).click();
+
+    const responsePromiseAddMember = page.waitForResponse(
+      (response) =>
+        response.url().includes('/accesses/') && response.status() === 201,
+    );
+
+    await page.getByRole('button', { name: 'Validate' }).click();
+
     await expect(
-      quickSearchContent.getByText(users[1].email).first(),
-    ).toBeVisible();
-    await expect(
-      quickSearchContent.getByText(users[1].full_name).first(),
+      page.getByText(`User ${user.email} added to the document.`),
     ).toBeVisible();
+    const responseAddMember = await responsePromiseAddMember;
+    expect(responseAddMember.ok()).toBeTruthy();
+
+    await inputSearch.fill('user');
+    await expect(page.getByText('Loading...')).toBeHidden();
+    await expect(page.getByRole('option', { name: user.email })).toBeHidden();
   });
 
   test('it try to add twice the same invitation', async ({
@@ -102,43 +183,40 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByRole('combobox', {
-      name: 'Quick search input',
-    });
+    const inputSearch = page.getByLabel(/Find a member to add to the document/);
 
     const [email] = randomName('test@test.fr', browserName, 1);
     await inputSearch.fill(email);
-    await page.getByTestId(`search-user-row-${email}`).click();
+    await page.getByRole('option', { name: email }).click();
 
     // Choose a role
-    const container = page.getByTestId('doc-share-add-member-list');
-    await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Owner' }).click();
+    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    await page.getByRole('option', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
-    await page.getByRole('button', { name: 'Invite' }).click();
+
+    await page.getByRole('button', { name: 'Validate' }).click();
 
     // Check invitation sent
-
+    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
 
     await inputSearch.fill(email);
-    await page.getByTestId(`search-user-row-${email}`).click();
-
+    await page.getByRole('option', { name: email }).click();
     // Choose a role
-    await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Owner' }).click();
+    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    await page.getByRole('option', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitationFail = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 400,
     );
 
-    await page.getByRole('button', { name: 'Invite' }).click();
+    await page.getByRole('button', { name: 'Validate' }).click();
     await expect(
       page.getByText(`"${email}" is already invited to the document.`),
     ).toBeVisible();
@@ -155,32 +233,31 @@ test.describe('Document create member', () => {
 
     const header = page.locator('header').first();
     await header.getByRole('combobox').getByText('EN').click();
-    await header.getByRole('option', { name: 'translate Français' }).click();
+    await header.getByRole('option', { name: 'FR' }).click();
 
     await page.getByRole('button', { name: 'Partager' }).click();
 
-    const inputSearch = page.getByRole('combobox', {
-      name: 'Saisie de recherche rapide',
-    });
+    const inputSearch = page.getByLabel(
+      /Trouver un membre à ajouter au document/,
+    );
 
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await page.getByTestId(`search-user-row-${email}`).click();
+    await page.getByRole('option', { name: email }).click();
 
     // Choose a role
-    const container = page.getByTestId('doc-share-add-member-list');
-    await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Administrateur' }).click();
+    await page.getByRole('combobox', { name: /Choisissez un rôle/ }).click();
+    await page.getByRole('option', { name: 'Administrateur' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
 
-    await page.getByRole('button', { name: 'Invite' }).click();
+    await page.getByRole('button', { name: 'Valider' }).click();
 
     // Check invitation sent
-
+    await expect(page.getByText(`Invitation envoyée à ${email}`)).toBeVisible();
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
     expect(
@@ -193,46 +270,41 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByRole('combobox', {
-      name: 'Quick search input',
-    });
+    const inputSearch = page.getByLabel(/Find a member to add to the document/);
 
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await page.getByTestId(`search-user-row-${email}`).click();
+    await page.getByRole('option', { name: email }).click();
 
     // Choose a role
-    const container = page.getByTestId('doc-share-add-member-list');
-    await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    await page.getByRole('option', { name: 'Administrator' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
 
-    await page.getByRole('button', { name: 'Invite' }).click();
+    await page.getByRole('button', { name: 'Validate' }).click();
 
     // Check invitation sent
+    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
 
-    const listInvitation = page.getByTestId('doc-share-quick-search');
-    const userInvitation = listInvitation.getByTestId(
-      `doc-share-invitation-row-${email}`,
-    );
-    await expect(userInvitation).toBeVisible();
-
-    await userInvitation.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Reader' }).click();
-
-    const moreActions = userInvitation.getByRole('button', {
-      name: 'more_horiz',
+    const listInvitation = page.getByLabel('List invitation card');
+    const li = listInvitation.locator('li').filter({
+      hasText: email,
     });
-    await moreActions.click();
+    await expect(li.getByText(email)).toBeVisible();
 
-    await page.getByRole('button', { name: 'Delete' }).click();
-
-    await expect(userInvitation).toBeHidden();
+    await li.getByRole('combobox', { name: /Role/ }).click();
+    await li.getByRole('option', { name: 'Reader' }).click();
+    await expect(page.getByText(`The role has been updated.`)).toBeVisible();
+    await li.getByText('delete').click();
+    await expect(
+      page.getByText(`The invitation has been removed.`),
+    ).toBeVisible();
+    await expect(listInvitation.locator('li').getByText(email)).toBeHidden();
   });
 });

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

@@ -1,6 +1,8 @@
 import { expect, test } from '@playwright/test';
 
-import { addNewMember, createDoc, goToGridDoc, verifyDocName } from './common';
+import { waitForElementCount } from '../helpers';
+
+import { addNewMember, createDoc, goToGridDoc } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -13,11 +15,10 @@ test.describe('Document list members', () => {
       async (route) => {
         const request = route.request();
         const url = new URL(request.url());
-        const pageId = url.searchParams.get('page') ?? '1';
-
+        const pageId = url.searchParams.get('page');
         const accesses = {
-          count: 40,
-          next: +pageId < 2 ? 'http://anything/?page=2' : undefined,
+          count: 100,
+          next: 'http://anything/?page=2',
           previous: null,
           results: Array.from({ length: 20 }, (_, i) => ({
             id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
@@ -46,23 +47,26 @@ test.describe('Document list members', () => {
       },
     );
 
-    const docTitle = await goToGridDoc(page);
-    await verifyDocName(page, docTitle);
+    await goToGridDoc(page);
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const prefix = 'doc-share-member-row';
-    const elements = page.locator(`[data-testid^="${prefix}"]`);
-    const loadMore = page.getByTestId('load-more-members');
+    const list = page.getByLabel('List members card').locator('ul');
+    await expect(list.locator('li')).toHaveCount(20);
+    await list.getByText(`impress@impress.world-page-${1}-18`).hover();
+    await page.mouse.wheel(0, 10);
 
-    await expect(elements).toHaveCount(20);
-    await expect(page.getByText(`Impress World Page 1-16`)).toBeVisible();
+    await waitForElementCount(list.locator('li'), 21, 10000);
 
-    await loadMore.click();
-    await expect(elements).toHaveCount(40);
-    await expect(page.getByText(`Impress World Page 2-15`)).toBeVisible();
-
-    await expect(loadMore).toBeHidden();
+    expect(await list.locator('li').count()).toBeGreaterThan(20);
+    await expect(list.getByText(`Impress World Page 1-16`)).toBeVisible();
+    await expect(
+      list.getByText(`impress@impress.world-page-1-16`),
+    ).toBeVisible();
+    await expect(list.getByText(`Impress World Page 2-15`)).toBeVisible();
+    await expect(
+      list.getByText(`impress@impress.world-page-2-15`),
+    ).toBeVisible();
   });
 
   test('it checks a big list of invitations', async ({ page }) => {
@@ -71,10 +75,10 @@ test.describe('Document list members', () => {
       async (route) => {
         const request = route.request();
         const url = new URL(request.url());
-        const pageId = url.searchParams.get('page') ?? '1';
+        const pageId = url.searchParams.get('page');
         const accesses = {
-          count: 40,
-          next: +pageId < 2 ? 'http://anything/?page=2' : null,
+          count: 100,
+          next: 'http://anything/?page=2',
           previous: null,
           results: Array.from({ length: 20 }, (_, i) => ({
             id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
@@ -100,128 +104,131 @@ test.describe('Document list members', () => {
       },
     );
 
-    const docTitle = await goToGridDoc(page);
-    await verifyDocName(page, docTitle);
+    await goToGridDoc(page);
+
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const prefix = 'doc-share-invitation';
-    const elements = page.locator(`[data-testid^="${prefix}"]`);
-    const loadMore = page.getByTestId('load-more-invitations');
+    const list = page.getByLabel('List invitation card').locator('ul');
+    await expect(list.locator('li')).toHaveCount(20);
+    await list.getByText(`impress@impress.world-page-${1}-18`).hover();
+    await page.mouse.wheel(0, 10);
 
-    await expect(elements).toHaveCount(20);
+    await waitForElementCount(list.locator('li'), 21, 10000);
+
+    expect(await list.locator('li').count()).toBeGreaterThan(20);
     await expect(
-      page.getByText(`impress@impress.world-page-1-16`).first(),
+      list.getByText(`impress@impress.world-page-1-16`),
     ).toBeVisible();
-
-    await loadMore.click();
-    await expect(elements).toHaveCount(40);
     await expect(
-      page.getByText(`impress@impress.world-page-2-16`).first(),
+      list.getByText(`impress@impress.world-page-2-15`),
     ).toBeVisible();
-
-    await expect(loadMore).toBeHidden();
   });
 
   test('it checks the role rules', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
 
-    await verifyDocName(page, docTitle);
+    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
 
     await page.getByRole('button', { name: 'Share' }).click();
-    const list = page.getByTestId('doc-share-quick-search');
-    await expect(list).toBeVisible();
-    const currentUser = list.getByTestId(
-      `doc-share-member-row-user@chromium.e2e`,
-    );
-    const currentUserRole = currentUser.getByLabel('doc-role-dropdown');
-    await expect(currentUser).toBeVisible();
-    await expect(currentUserRole).toBeVisible();
-    await currentUserRole.click();
-    const soloOwner = page.getByText(
+
+    const list = page.getByLabel('List members card').locator('ul');
+
+    await expect(list.getByText(`user@${browserName}.e2e`)).toBeVisible();
+
+    const soleOwner = list.getByText(
       `You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.`,
     );
-    await expect(soloOwner).toBeVisible();
-    await list.click();
-    const newUserEmail = await addNewMember(page, 0, 'Owner');
-    const newUser = list.getByTestId(`doc-share-member-row-${newUserEmail}`);
-    const newUserRoles = newUser.getByLabel('doc-role-dropdown');
 
-    await expect(newUser).toBeVisible();
+    await expect(soleOwner).toBeVisible();
 
-    await currentUserRole.click();
-    await expect(soloOwner).toBeHidden();
-    await list.click();
+    const username = await addNewMember(page, 0, 'Owner');
 
-    const otherOwner = page.getByText(
+    await expect(list.getByText(username)).toBeVisible();
+
+    await expect(soleOwner).toBeHidden();
+
+    const otherOwner = list.getByText(
       `You cannot update the role or remove other owner.`,
     );
 
-    await newUserRoles.click();
     await expect(otherOwner).toBeVisible();
-    await list.click();
 
-    await currentUserRole.click();
-    await page.getByRole('button', { name: 'Administrator' }).click();
-    await list.click();
-    await expect(currentUserRole).toBeVisible();
+    const SelectRoleCurrentUser = list
+      .locator('li')
+      .filter({
+        hasText: `user@${browserName}.e2e`,
+      })
+      .getByRole('combobox', { name: 'Role' });
 
-    await currentUserRole.click();
-    await page.getByRole('button', { name: 'Reader' }).click();
-    await list.click();
-    await expect(currentUserRole).toBeHidden();
+    await SelectRoleCurrentUser.click();
+    await page.getByRole('option', { name: 'Administrator' }).click();
+    await expect(page.getByText('The role has been updated')).toBeVisible();
+
+    const shareModal = page.getByLabel('Share modal');
+
+    // Admin still have the right to share
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).not.toHaveAttribute('disabled');
+
+    await SelectRoleCurrentUser.click();
+    await page.getByRole('option', { name: 'Reader' }).click();
+    await expect(page.getByText('The role has been updated')).toBeVisible();
+
+    // Reader does not have the right to share
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
   });
 
   test('it checks the delete members', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
 
-    await verifyDocName(page, docTitle);
+    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const list = page.getByTestId('doc-share-quick-search');
+    const list = page.getByLabel('List members card').locator('ul');
 
-    const emailMyself = `user@${browserName}.e2e`;
-    const mySelf = list.getByTestId(`doc-share-member-row-${emailMyself}`);
-    const mySelfMoreActions = mySelf.getByRole('button', {
-      name: 'more_horiz',
-    });
+    const nameMyself = `user@${browserName}.e2e`;
+    await expect(list.getByText(nameMyself)).toBeVisible();
 
-    const userOwnerEmail = await addNewMember(page, 0, 'Owner');
-    const userOwner = list.getByTestId(
-      `doc-share-member-row-${userOwnerEmail}`,
-    );
-    const userOwnerMoreActions = userOwner.getByRole('button', {
-      name: 'more_horiz',
-    });
+    const userOwner = await addNewMember(page, 0, 'Owner');
+    await expect(list.getByText(userOwner)).toBeVisible();
 
-    await page.getByRole('button', { name: 'close' }).first().click();
-    await page.getByRole('button', { name: 'Share' }).first().click();
+    const userReader = await addNewMember(page, 0, 'Reader');
+    await expect(list.getByText(userReader)).toBeVisible();
 
-    const userReaderEmail = await addNewMember(page, 0, 'Reader');
+    await list
+      .locator('li')
+      .filter({
+        hasText: userReader,
+      })
+      .getByText('delete')
+      .click();
 
-    const userReader = list.getByTestId(
-      `doc-share-member-row-${userReaderEmail}`,
-    );
-    const userReaderMoreActions = userReader.getByRole('button', {
-      name: 'more_horiz',
-    });
+    await expect(list.getByText(userReader)).toBeHidden();
 
-    await expect(mySelf).toBeVisible();
-    await expect(userOwner).toBeVisible();
-    await expect(userReader).toBeVisible();
+    await list
+      .locator('li')
+      .filter({
+        hasText: nameMyself,
+      })
+      .getByText('delete')
+      .click();
 
-    await expect(userOwnerMoreActions).toBeVisible();
-    await expect(userReaderMoreActions).toBeVisible();
-    await expect(mySelfMoreActions).toBeVisible();
+    await expect(list.getByText(nameMyself)).toBeHidden();
 
-    await userReaderMoreActions.click();
-    await page.getByRole('button', { name: 'Delete' }).click();
-    await expect(userReader).toBeHidden();
-
-    await mySelfMoreActions.click();
-    await page.getByRole('button', { name: 'Delete' }).click();
     await expect(
-      page.getByText('You do not have permission to perform this action.'),
+      page.getByText('The member has been removed from the document').first(),
     ).toBeVisible();
+
+    await expect(
+      page.getByRole('heading', { name: 'Share', level: 3 }),
+    ).toBeHidden();
   });
 });

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

@@ -9,7 +9,7 @@ test.describe('Doc Routing', () => {
 
   test('Check the presence of the meta tag noindex', async ({ page }) => {
     const buttonCreateHomepage = page.getByRole('button', {
-      name: 'New doc',
+      name: 'Create a new document',
     });
 
     await expect(buttonCreateHomepage).toBeVisible();
@@ -27,7 +27,7 @@ test.describe('Doc Routing', () => {
     await expect(page).toHaveURL('/');
 
     const buttonCreateHomepage = page.getByRole('button', {
-      name: 'New doc',
+      name: 'Create a new document',
     });
 
     await expect(buttonCreateHomepage).toBeVisible();

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

@@ -1,114 +0,0 @@
-import { expect, test } from '@playwright/test';
-import { DateTime } from 'luxon';
-
-import { createDoc, verifyDocName } from './common';
-
-type SmallDoc = {
-  id: string;
-  title: string;
-  updated_at: string;
-};
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-});
-
-test.describe('Document search', () => {
-  test('it checks all elements are visible', async ({ page }) => {
-    await page.getByRole('button', { name: 'search' }).click();
-    await expect(
-      page.getByRole('img', { name: 'No active search' }),
-    ).toBeVisible();
-
-    await expect(
-      page.getByLabel('Search modal').getByText('search'),
-    ).toBeVisible();
-
-    await expect(
-      page.getByPlaceholder('Type the name of a document'),
-    ).toBeVisible();
-  });
-
-  test('it checks search for a document', async ({ page, browserName }) => {
-    const id = Math.random().toString(36).substring(7);
-
-    const doc1 = await createDoc(page, `My super ${id} doc`, browserName, 1);
-    await verifyDocName(page, doc1[0]);
-    await page.goto('/');
-    const doc2 = await createDoc(
-      page,
-      `My super ${id} very doc`,
-      browserName,
-      1,
-    );
-    await verifyDocName(page, doc2[0]);
-    await page.goto('/');
-    await page.getByRole('button', { name: 'search' }).click();
-    await page.getByPlaceholder('Type the name of a document').click();
-    await page
-      .getByPlaceholder('Type the name of a document')
-      .fill(`My super ${id}`);
-
-    let responsePromisePage = page.waitForResponse(
-      (response) =>
-        response.url().includes(`/documents/?page=1&title=My+super+${id}`) &&
-        response.status() === 200,
-    );
-    let response = await responsePromisePage;
-    let result = (await response.json()) as { results: SmallDoc[] };
-    let docs = result.results;
-    expect(docs.length).toEqual(2);
-
-    await Promise.all(
-      docs.map(async (doc: SmallDoc) => {
-        await expect(
-          page.getByTestId(`doc-search-item-${doc.id}`),
-        ).toBeVisible();
-        const updatedAt = DateTime.fromISO(doc.updated_at ?? DateTime.now())
-          .setLocale('en')
-          .toRelative();
-        await expect(
-          page.getByTestId(`doc-search-item-${doc.id}`).getByText(updatedAt!),
-        ).toBeVisible();
-      }),
-    );
-
-    const firstDoc = docs[0];
-
-    await expect(
-      page
-        .getByTestId(`doc-search-item-${firstDoc.id}`)
-        .getByText('keyboard_return'),
-    ).toBeVisible();
-
-    await page
-      .getByPlaceholder('Type the name of a document')
-      .press('ArrowDown');
-
-    const secondDoc = docs[1];
-    await expect(
-      page
-        .getByTestId(`doc-search-item-${secondDoc.id}`)
-        .getByText('keyboard_return'),
-    ).toBeVisible();
-
-    await page.getByPlaceholder('Type the name of a document').click();
-    await page
-      .getByPlaceholder('Type the name of a document')
-      .fill(`My super ${id} doc`);
-
-    responsePromisePage = page.waitForResponse(
-      (response) =>
-        response
-          .url()
-          .includes(`/documents/?page=1&title=My+super+${id}+doc`) &&
-        response.status() === 200,
-    );
-
-    response = await responsePromisePage;
-    result = (await response.json()) as { results: SmallDoc[] };
-    docs = result.results;
-
-    expect(docs.length).toEqual(1);
-  });
-});

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './common';
+import { createDoc, goToGridDoc } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -17,29 +17,123 @@ test.describe('Doc Table Content', () => {
       1,
     );
 
-    await verifyDocName(page, randomDoc);
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
 
-    await page.locator('.ProseMirror').click();
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Table of contents',
+      })
+      .click();
 
-    await page.keyboard.type('# Level 1\n## Level 2\n### Level 3');
+    const panel = page.getByLabel('Document panel');
+    const editor = page.locator('.ProseMirror');
 
-    const summaryContainer = page.locator('#summaryContainer');
-    await summaryContainer.click();
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Heading 1').click();
+    await page.keyboard.type('Hello World');
+    await editor.getByText('Hello').dblclick();
+    await page.getByRole('button', { name: 'Strike' }).click();
 
-    const level1 = summaryContainer.getByText('Level 1');
-    const level2 = summaryContainer.getByText('Level 2');
-    const level3 = summaryContainer.getByText('Level 3');
+    await page.locator('.bn-block-outer').first().click();
+    await page.locator('.bn-block-outer').last().click();
 
-    await expect(level1).toBeVisible();
-    await expect(level1).toHaveCSS('padding', /4px 0px/);
-    await expect(level1).toHaveAttribute('aria-selected', 'true');
+    // Create space to fill the viewport
+    for (let i = 0; i < 10; i++) {
+      await page.keyboard.press('Enter');
+    }
 
-    await expect(level2).toBeVisible();
-    await expect(level2).toHaveCSS('padding-left', /14.4px/);
-    await expect(level2).toHaveAttribute('aria-selected', 'false');
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Heading 2').click();
+    await page.keyboard.type('Super World', { delay: 100 });
 
-    await expect(level3).toBeVisible();
-    await expect(level3).toHaveCSS('padding-left', /24px/);
-    await expect(level3).toHaveAttribute('aria-selected', 'false');
+    await page.locator('.bn-block-outer').last().click();
+
+    // Create space to fill the viewport
+    for (let i = 0; i < 10; i++) {
+      await page.keyboard.press('Enter');
+    }
+
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Heading 3').click();
+    await page.keyboard.type('Another World');
+
+    const hello = panel.getByText('Hello World');
+    const superW = panel.getByText('Super World');
+    const another = panel.getByText('Another World');
+
+    await expect(hello).toBeVisible();
+    await expect(hello).toHaveCSS('font-size', /17/);
+    await expect(hello).toHaveAttribute('aria-selected', 'true');
+
+    await expect(superW).toBeVisible();
+    await expect(superW).toHaveCSS('font-size', /14/);
+    await expect(superW).toHaveAttribute('aria-selected', 'false');
+
+    await expect(another).toBeVisible();
+    await expect(another).toHaveCSS('font-size', /12/);
+    await expect(another).toHaveAttribute('aria-selected', 'false');
+
+    await hello.click();
+
+    await expect(editor.getByText('Hello World')).toBeInViewport();
+    await expect(hello).toHaveAttribute('aria-selected', 'true');
+    await expect(superW).toHaveAttribute('aria-selected', 'false');
+
+    await another.click();
+
+    await expect(editor.getByText('Hello World')).not.toBeInViewport();
+    await expect(hello).toHaveAttribute('aria-selected', 'false');
+    await expect(superW).toHaveAttribute('aria-selected', 'true');
+
+    await panel.getByText('Back to top').click();
+    await expect(editor.getByText('Hello World')).toBeInViewport();
+    await expect(hello).toHaveAttribute('aria-selected', 'true');
+    await expect(superW).toHaveAttribute('aria-selected', 'false');
+
+    await panel.getByText('Go to bottom').click();
+    await expect(editor.getByText('Hello World')).not.toBeInViewport();
+    await expect(superW).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('it checks that table contents panel is opened automaticaly if more that 2 headings', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(
+      page,
+      'doc-table-content',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await expect(page.getByLabel('Open the panel')).toBeHidden();
+
+    const editor = page.locator('.ProseMirror');
+
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Heading 1').click();
+    await page.keyboard.type('Hello World', { delay: 100 });
+
+    await page.keyboard.press('Enter');
+
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Heading 2').click();
+    await page.keyboard.type('Super World', { delay: 100 });
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByLabel('Close the panel')).toBeVisible();
+
+    const panel = page.getByLabel('Document panel');
+    await expect(panel.getByText('Hello World')).toBeVisible();
+    await expect(panel.getByText('Super World')).toBeVisible();
+
+    await page.getByLabel('Close the panel').click();
+
+    await expect(panel).toHaveAttribute('aria-hidden', 'true');
   });
 });

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

@@ -1,11 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import {
-  createDoc,
-  goToGridDoc,
-  mockedDocument,
-  verifyDocName,
-} from './common';
+import { createDoc, goToGridDoc, mockedDocument } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -15,7 +10,7 @@ test.describe('Doc Version', () => {
   test('it displays the doc versions', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
 
-    await verifyDocName(page, randomDoc);
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -23,29 +18,24 @@ test.describe('Doc Version', () => {
         name: 'Version history',
       })
       .click();
-    await expect(page.getByText('History', { exact: true })).toBeVisible();
 
-    const modal = page.getByLabel('version history modal');
-    const panel = modal.getByLabel('version list');
-    await expect(panel).toBeVisible();
-    await expect(modal.getByText('No versions')).toBeVisible();
+    const panel = page.getByLabel('Document panel');
 
-    const editor = page.locator('.ProseMirror');
-    await modal.getByRole('button', { name: 'close' }).click();
-    await editor.click();
-    await page.keyboard.type('# Hello World');
+    await expect(panel.getByText('Current version')).toBeVisible();
+    expect(await panel.locator('li').count()).toBe(1);
+
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').last().fill('Hello World');
 
     await goToGridDoc(page, {
       title: randomDoc,
     });
 
-    await expect(
-      page.getByRole('heading', { name: 'Hello World' }),
-    ).toBeVisible();
+    await expect(page.getByText('Hello World')).toBeVisible();
 
     await page
       .locator('.ProseMirror .bn-block')
-      .getByRole('heading', { name: 'Hello World' })
+      .getByText('Hello World')
       .fill('It will create a version');
 
     await goToGridDoc(page, {
@@ -53,9 +43,7 @@ test.describe('Doc Version', () => {
     });
 
     await expect(page.getByText('Hello World')).toBeHidden();
-    await expect(
-      page.getByRole('heading', { name: 'It will create a version' }),
-    ).toBeVisible();
+    await expect(page.getByText('It will create a version')).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -64,15 +52,19 @@ test.describe('Doc Version', () => {
       })
       .click();
 
-    await expect(panel).toBeVisible();
-    await expect(page.getByText('History', { exact: true })).toBeVisible();
-    await expect(page.getByRole('status')).toBeHidden();
-    const items = await panel.locator('.version-item').all();
-    expect(items.length).toBe(1);
-    await items[0].click();
+    await expect(panel.getByText('Current version')).toBeVisible();
+    expect(await panel.locator('li').count()).toBe(2);
 
-    await expect(modal.getByText('Hello World')).toBeVisible();
-    await expect(modal.getByText('It will create a version')).toBeHidden();
+    await panel.locator('li').nth(1).click();
+    await expect(
+      page.getByText('Read only, you cannot edit document versions.'),
+    ).toBeVisible();
+    await expect(page.getByText('Hello World')).toBeVisible();
+    await expect(page.getByText('It will create a version')).toBeHidden();
+
+    await panel.getByText('Current version').click();
+    await expect(page.getByText('Hello World')).toBeHidden();
+    await expect(page.getByText('It will create a version')).toBeVisible();
   });
 
   test('it does not display the doc versions if not allowed', async ({
@@ -87,17 +79,24 @@ test.describe('Doc Version', () => {
 
     await goToGridDoc(page);
 
-    await verifyDocName(page, 'Mocked document');
+    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
     await expect(
       page.getByRole('button', { name: 'Version history' }),
-    ).toBeDisabled();
+    ).toBeHidden();
+
+    await page.getByRole('button', { name: 'Table of content' }).click();
+
+    await expect(
+      page.getByLabel('Document panel').getByText('Versions'),
+    ).toBeHidden();
   });
 
   test('it restores the doc version', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
-    await verifyDocName(page, randomDoc);
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
 
     await page.locator('.bn-block-outer').last().click();
     await page.locator('.bn-block-outer').last().fill('Hello');
@@ -125,26 +124,84 @@ test.describe('Doc Version', () => {
       })
       .click();
 
-    const modal = page.getByLabel('version history modal');
-    const panel = modal.getByLabel('version list');
-    await expect(panel).toBeVisible();
+    const panel = page.getByLabel('Document panel');
+    await panel.locator('li').nth(1).click();
+    await expect(page.getByText('World')).toBeHidden();
 
-    await expect(page.getByText('History', { exact: true })).toBeVisible();
-    await expect(page.getByRole('status')).toBeVisible();
-    await expect(page.getByRole('status')).toBeHidden();
-    const items = await panel.locator('.version-item').all();
-    expect(items.length).toBe(1);
-    await items[0].click();
+    await panel.getByLabel('Open the version options').click();
+    await page.getByText('Restore the version').click();
 
-    await expect(modal.getByText('World')).toBeHidden();
+    await expect(page.getByText('Restore this version?')).toBeVisible();
 
-    await page.getByRole('button', { name: 'Restore' }).click();
-    await expect(page.getByText('Your current document will')).toBeVisible();
-    await page.getByText('If a member is editing, his').click();
+    await page
+      .getByRole('button', {
+        name: 'Restore',
+      })
+      .click();
 
-    await page.getByLabel('Restore', { exact: true }).click();
+    await expect(panel.locator('li')).toHaveCount(3);
 
+    await panel.getByText('Current version').click();
     await expect(page.getByText('Hello')).toBeVisible();
     await expect(page.getByText('World')).toBeHidden();
   });
+
+  test('it restores the doc version from button title', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    const editor = page.locator('.ProseMirror');
+    await editor.locator('.bn-block-outer').last().click();
+    await editor.locator('.bn-block-outer').last().fill('Hello');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(editor.getByText('Hello')).toBeVisible();
+    await editor.locator('.bn-block-outer').last().click();
+    await page.keyboard.press('Enter');
+    await editor.locator('.bn-block-outer').last().fill('World');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(editor.getByText('World')).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Version history',
+      })
+      .click();
+
+    const panel = page.getByLabel('Document panel');
+    await panel.locator('li').nth(1).click();
+    await expect(editor.getByText('World')).toBeHidden();
+
+    await page
+      .getByRole('button', {
+        name: 'Restore this version',
+      })
+      .click();
+
+    await expect(page.getByText('Restore this version?')).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Restore',
+      })
+      .click();
+
+    await expect(panel.locator('li')).toHaveCount(3);
+
+    await panel.getByText('Current version').click();
+    await expect(editor.getByText('Hello')).toBeVisible();
+    await expect(editor.getByText('World')).toBeHidden();
+  });
 });

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, keyCloakSignIn, verifyDocName } from './common';
+import { createDoc, keyCloakSignIn } from './common';
 
 const browsersName = ['chromium', 'webkit', 'firefox'];
 
@@ -36,31 +36,35 @@ test.describe('Doc Visibility', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    const selectVisibility = page.getByRole('combobox', {
+      name: 'Visibility',
+    });
 
-    await expect(selectVisibility.getByText('Private')).toBeVisible();
+    await expect(selectVisibility.getByText('Restricted')).toBeVisible();
 
     await expect(page.getByLabel('Read only')).toBeHidden();
     await expect(page.getByLabel('Can read and edit')).toBeHidden();
 
     await selectVisibility.click();
     await page
-      .getByRole('button', {
-        name: 'Connected',
+      .getByRole('option', {
+        name: 'Authenticated',
       })
       .click();
 
-    await expect(page.getByLabel('Visibility mode')).toBeVisible();
+    await expect(page.getByLabel('Read only')).toBeVisible();
+    await expect(page.getByLabel('Can read and edit')).toBeVisible();
 
     await selectVisibility.click();
 
     await page
-      .getByRole('button', {
+      .getByRole('option', {
         name: 'Public',
       })
       .click();
 
-    await expect(page.getByLabel('Visibility mode')).toBeVisible();
+    await expect(page.getByLabel('Read only')).toBeVisible();
+    await expect(page.getByLabel('Can read and edit')).toBeVisible();
   });
 });
 
@@ -81,7 +85,7 @@ test.describe('Doc Visibility: Restricted', () => {
       1,
     );
 
-    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
 
     const urlDoc = page.url();
 
@@ -107,7 +111,7 @@ test.describe('Doc Visibility: Restricted', () => {
 
     const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
 
-    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
 
     const urlDoc = page.url();
 
@@ -135,13 +139,11 @@ test.describe('Doc Visibility: Restricted', () => {
 
     const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
 
-    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByRole('combobox', {
-      name: 'Quick search input',
-    });
+    const inputSearch = page.getByLabel(/Find a member to add to the document/);
 
     const otherBrowser = browsersName.find((b) => b !== browserName);
     const username = `user@${otherBrowser}.e2e`;
@@ -149,11 +151,14 @@ test.describe('Doc Visibility: Restricted', () => {
     await page.getByRole('option', { name: username }).click();
 
     // Choose a role
-    const container = page.getByTestId('doc-share-add-member-list');
-    await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    await page.getByRole('option', { name: 'Administrator' }).click();
 
-    await page.getByRole('button', { name: 'Invite' }).click();
+    await page.getByRole('button', { name: 'Validate' }).click();
+
+    await expect(
+      page.getByText(`User ${username} added to the document.`),
+    ).toBeVisible();
 
     await page.locator('.c__modal__backdrop').click({
       position: { x: 0, y: 0 },
@@ -171,8 +176,8 @@ test.describe('Doc Visibility: Restricted', () => {
 
     await page.goto(urlDoc);
 
-    await verifyDocName(page, docTitle);
-    await expect(page.getByLabel('Share button')).toBeVisible();
+    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
   });
 });
 
@@ -193,14 +198,17 @@ test.describe('Doc Visibility: Public', () => {
       1,
     );
 
-    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
 
     await page.getByRole('button', { name: 'Share' }).click();
-    const selectVisibility = page.getByLabel('Visibility', { exact: true });
-    await selectVisibility.click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
 
     await page
-      .getByRole('button', {
+      .getByRole('option', {
         name: 'Public',
       })
       .click();
@@ -209,32 +217,22 @@ test.describe('Doc Visibility: Public', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.getByLabel('Visibility mode').click();
-    await page
-      .getByRole('button', {
-        name: 'Reading',
-      })
-      .click();
+    await page.getByLabel('Read only').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
     ).toBeVisible();
 
-    await page.getByRole('button', { name: 'close' }).click();
-
-    const cardContainer = page.getByLabel(
-      'It is the card information about the document.',
-    );
-
-    await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
 
     await expect(
-      cardContainer.getByText('Public document', { exact: true }),
+      page
+        .getByLabel('It is the card information about the document.')
+        .getByText('Public', { exact: true }),
     ).toBeVisible();
 
-    await expect(page.getByRole('button', { name: 'search' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
-
     const urlDoc = page.url();
 
     await page
@@ -248,13 +246,10 @@ test.describe('Doc Visibility: Public', () => {
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
-    await expect(page.getByRole('button', { name: 'search' })).toBeHidden();
-    await expect(page.getByRole('button', { name: 'New doc' })).toBeHidden();
     await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
-    const card = page.getByLabel('It is the card information');
-    await expect(card).toBeVisible();
-
-    await expect(card.getByText('Reader')).toBeVisible();
+    await expect(
+      page.getByText('Read only, you cannot edit this document'),
+    ).toBeVisible();
   });
 
   test('It checks a public doc in editable mode', async ({
@@ -266,14 +261,17 @@ test.describe('Doc Visibility: Public', () => {
 
     const [docTitle] = await createDoc(page, 'Public editable', browserName, 1);
 
-    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
 
     await page.getByRole('button', { name: 'Share' }).click();
-    const selectVisibility = page.getByLabel('Visibility', { exact: true });
-    await selectVisibility.click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
 
     await page
-      .getByRole('button', {
+      .getByRole('option', {
         name: 'Public',
       })
       .click();
@@ -282,23 +280,20 @@ test.describe('Doc Visibility: Public', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.getByLabel('Visibility mode').click();
-    await page.getByLabel('Edition').click();
+    await page.getByLabel('Can read and edit').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
     ).toBeVisible();
 
-    await page.getByRole('button', { name: 'close' }).click();
-
-    const cardContainer = page.getByLabel(
-      'It is the card information about the document.',
-    );
-
-    await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
 
     await expect(
-      cardContainer.getByText('Public document', { exact: true }),
+      page
+        .getByLabel('It is the card information about the document.')
+        .getByText('Public', { exact: true }),
     ).toBeVisible();
 
     const urlDoc = page.url();
@@ -313,8 +308,11 @@ test.describe('Doc Visibility: Public', () => {
 
     await page.goto(urlDoc);
 
-    await verifyDocName(page, docTitle);
+    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
+    await expect(
+      page.getByText('Read only, you cannot edit this document'),
+    ).toBeHidden();
   });
 });
 
@@ -335,14 +333,17 @@ test.describe('Doc Visibility: Authenticated', () => {
       1,
     );
 
-    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
 
     await page.getByRole('button', { name: 'Share' }).click();
-    const selectVisibility = page.getByLabel('Visibility', { exact: true });
-    await selectVisibility.click();
     await page
-      .getByRole('button', {
-        name: 'Connected',
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+    await page
+      .getByRole('option', {
+        name: 'Authenticated',
       })
       .click();
 
@@ -350,7 +351,9 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.getByRole('button', { name: 'close' }).click();
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
 
     const urlDoc = page.url();
 
@@ -382,14 +385,17 @@ test.describe('Doc Visibility: Authenticated', () => {
       1,
     );
 
-    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
 
     await page.getByRole('button', { name: 'Share' }).click();
-    const selectVisibility = page.getByLabel('Visibility', { exact: true });
-    await selectVisibility.click();
     await page
-      .getByRole('button', {
-        name: 'Connected',
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+    await page
+      .getByRole('option', {
+        name: 'Authenticated',
       })
       .click();
 
@@ -397,7 +403,9 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.getByRole('button', { name: 'close' }).click();
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
 
     const urlDoc = page.url();
 
@@ -414,13 +422,19 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
     await page.getByRole('button', { name: 'Share' }).click();
+    await expect(
+      page.getByText('Read only, you cannot edit this document'),
+    ).toBeVisible();
 
-    await expect(selectVisibility).toBeHidden();
+    const shareModal = page.getByLabel('Share modal');
 
-    const inputSearch = page.getByRole('combobox', {
-      name: 'Quick search input',
-    });
-    await expect(inputSearch).toBeHidden();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
+    await expect(shareModal.getByText('Search by email')).toBeHidden();
+    await expect(shareModal.getByLabel('List members card')).toBeHidden();
   });
 
   test('It checks a authenticated doc in editable mode', async ({
@@ -437,14 +451,17 @@ test.describe('Doc Visibility: Authenticated', () => {
       1,
     );
 
-    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
 
     await page.getByRole('button', { name: 'Share' }).click();
-    const selectVisibility = page.getByLabel('Visibility', { exact: true });
-    await selectVisibility.click();
     await page
-      .getByRole('button', {
-        name: 'Connected',
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+    await page
+      .getByRole('option', {
+        name: 'Authenticated',
       })
       .click();
 
@@ -452,15 +469,23 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
+
     const urlDoc = page.url();
-    await page.getByLabel('Visibility mode').click();
-    await page.getByLabel('Edition').click();
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    await page.getByLabel('Can read and edit').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
     ).toBeVisible();
 
-    await page.getByRole('button', { name: 'close' }).click();
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
 
     await page
       .getByRole('button', {
@@ -473,14 +498,20 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     await page.goto(urlDoc);
 
-    await verifyDocName(page, docTitle);
+    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
     await page.getByRole('button', { name: 'Share' }).click();
+    await expect(
+      page.getByText('Read only, you cannot edit this document'),
+    ).toBeHidden();
 
-    await expect(selectVisibility).toBeHidden();
+    const shareModal = page.getByLabel('Share modal');
 
-    const inputSearch = page.getByRole('combobox', {
-      name: 'Quick search input',
-    });
-    await expect(inputSearch).toBeHidden();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
+    await expect(shareModal.getByText('Search by email')).toBeHidden();
+    await expect(shareModal.getByLabel('List members card')).toBeHidden();
   });
 });

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

@@ -75,13 +75,29 @@ test.describe('Header mobile', () => {
   test('it checks the header when mobile', async ({ page }) => {
     const header = page.locator('header').first();
 
-    await expect(header.getByLabel('Open the header menu')).toBeVisible();
-    await expect(header.getByRole('link', { name: 'Docs Logo' })).toBeVisible();
     await expect(
       header.getByRole('button', {
         name: 'Les services de La Suite numérique',
       }),
     ).toBeVisible();
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Logout',
+      }),
+    ).toBeHidden();
+
+    await expect(page.getByText('English')).toBeHidden();
+
+    await header.getByLabel('Open the header menu').click();
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Logout',
+      }),
+    ).toBeVisible();
+
+    await expect(page.getByText('English')).toBeVisible();
   });
 });
 

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

@@ -6,7 +6,11 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Language', () => {
   test('checks the language picker', async ({ page }) => {
-    await expect(page.getByLabel('Logout')).toBeVisible();
+    await expect(
+      page.getByRole('button', {
+        name: 'Create a new document',
+      }),
+    ).toBeVisible();
 
     const header = page.locator('header').first();
     await header.getByRole('combobox').getByText('English').click();
@@ -15,7 +19,11 @@ test.describe('Language', () => {
       header.getByRole('combobox').getByText('Français'),
     ).toBeVisible();
 
-    await expect(page.getByLabel('Se déconnecter')).toBeVisible();
+    await expect(
+      page.getByRole('button', {
+        name: 'Créer un nouveau document',
+      }),
+    ).toBeVisible();
 
     await header.getByRole('combobox').getByText('Français').click();
     await header.getByRole('option', { name: 'Deutsch' }).click();
@@ -23,7 +31,11 @@ test.describe('Language', () => {
       header.getByRole('combobox').getByText('Deutsch'),
     ).toBeVisible();
 
-    await expect(page.getByLabel('Abmelden')).toBeVisible();
+    await expect(
+      page.getByRole('button', {
+        name: 'Neues Dokument erstellen',
+      }),
+    ).toBeVisible();
   });
 
   test('checks that backend uses the same language as the frontend', async ({

src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts

@@ -1,48 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test.describe('Left panel desktop', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-  });
-
-  test('checks all the elements are visible', async ({ page }) => {
-    await expect(page.getByTestId('left-panel-desktop')).toBeVisible();
-    await expect(page.getByTestId('left-panel-mobile')).toBeHidden();
-    await expect(page.getByRole('button', { name: 'house' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
-  });
-});
-
-test.describe('Left panel mobile', () => {
-  test.use({ viewport: { width: 500, height: 1200 } });
-
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-  });
-
-  test('checks all the desktop elements are hidden and all mobile elements are visible', async ({
-    page,
-  }) => {
-    await expect(page.getByTestId('left-panel-desktop')).toBeHidden();
-    await expect(page.getByTestId('left-panel-mobile')).not.toBeInViewport();
-
-    const header = page.locator('header').first();
-    const homeButton = page.getByRole('button', { name: 'house' });
-    const newDocButton = page.getByRole('button', { name: 'New doc' });
-    const languageButton = page.getByRole('combobox', { name: 'Language' });
-    const logoutButton = page.getByRole('button', { name: 'Logout' });
-
-    await expect(homeButton).not.toBeInViewport();
-    await expect(newDocButton).not.toBeInViewport();
-    await expect(languageButton).not.toBeInViewport();
-    await expect(logoutButton).not.toBeInViewport();
-
-    await header.getByLabel('Open the header menu').click();
-
-    await expect(page.getByTestId('left-panel-mobile')).toBeInViewport();
-    await expect(homeButton).toBeInViewport();
-    await expect(newDocButton).toBeInViewport();
-    await expect(languageButton).toBeInViewport();
-    await expect(logoutButton).toBeInViewport();
-  });
-});

src/frontend/apps/e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-e2e",
-  "version": "2.0.0",
+  "version": "1.10.0",
   "private": true,
   "scripts": {
     "lint": "eslint . --ext .ts",
@@ -13,11 +13,9 @@
   },
   "devDependencies": {
     "@playwright/test": "1.49.1",
-    "@types/luxon": "3.4.2",
     "@types/node": "*",
     "@types/pdf-parse": "1.1.4",
     "eslint-config-impress": "*",
-    "luxon": "3.5.0",
     "typescript": "*"
   },
   "dependencies": {

src/frontend/apps/impress/conf/default.conf

@@ -9,6 +9,10 @@ server {
       try_files $uri index.html $uri/ =404;
   }
 
+  location ~ ^/docs/(.*)/versions/(.*)/$ {
+    error_page 404 /docs/[id]/versions/[versionId]/;
+  }
+
   location /docs/ {
     error_page 404 /docs/[id]/;
   }

src/frontend/apps/impress/cunningham.ts

@@ -5,60 +5,22 @@ const config = {
         colors: {
           'card-border': '#ededed',
           'primary-bg': '#FAFAFA',
-          'primary-050': '#F5F5FE',
           'primary-100': '#EDF5FA',
           'primary-150': '#E5EEFA',
-          'primary-950': '#1B1B35',
           'info-150': '#E5EEFA',
-          'greyscale-000': '#fff',
-          'greyscale-1000': '#161616',
-          'blue-400': '#7AB1E8',
-          'blue-500': '#417DC4',
-          'blue-600': '#3558A2',
-          'brown-400': '#E6BE92',
-          'brown-500': '#BD987A',
-          'brown-600': '#745B47',
-          'cyan-400': '#34BAB5',
-          'cyan-500': '#009099',
-          'cyan-600': '#006A6F',
-          'gold-400': '#FFCA00',
-          'gold-500': '#C3992A',
-          'gold-600': '#695240',
-          'green-400': '#34CB6A',
-          'green-500': '#00A95F',
-          'green-600': '#297254',
-          'olive-400': '#99C221',
-          'olive-500': '#68A532',
-          'olive-600': '#447049',
-          'orange-400': '#FF732C',
-          'orange-500': '#E4794A',
-          'orange-600': '#755348',
-          'pink-400': '#FFB7AE',
-          'pink-500': '#E18B76',
-          'pink-600': '#8D533E',
-          'purple-400': '#CE70CC',
-          'purple-500': '#A558A0',
-          'purple-600': '#6E445A',
-          'yellow-400': '#D8C634',
-          'yellow-500': '#B7A73F',
-          'yellow-600': '#66673D',
         },
         font: {
           sizes: {
-            xs: '0.75rem',
-            sm: '0.875rem',
-            md: '1rem',
-            lg: '1.125rem',
             ml: '0.938rem',
-            xl: '1.25rem',
+            xl: '1.50rem',
             t: '0.6875rem',
             s: '0.75rem',
-            h1: '2rem',
-            h2: '1.75rem',
-            h3: '1.5rem',
-            h4: '1.375rem',
-            h5: '1.25rem',
-            h6: '1.125rem',
+            h1: '2.2rem',
+            h2: '1.7rem',
+            h3: '1.37rem',
+            h4: '1.15rem',
+            h5: '1rem',
+            h6: '0.87rem',
           },
           weights: {
             thin: 100,
@@ -72,21 +34,6 @@ const config = {
           auto: 'auto',
           bx: '2.2rem',
           full: '100%',
-          '4xs': '0.125rem',
-          '3xs': '0.25rem',
-          '2xs': '0.375rem',
-          xs: '0.5rem',
-          sm: '0.75rem',
-          base: '1rem',
-          md: '1.5rem',
-          lg: '2rem',
-          xl: '2.5rem',
-          xxl: '3rem',
-          xxxl: '3.5rem',
-          '4xl': '4rem',
-          '5xl': '4.5rem',
-          '6xl': '6rem',
-          '7xl': '7.5rem',
         },
         breakpoints: {
           xxs: '320px',
@@ -157,7 +104,7 @@ const config = {
             focus: 'var(--c--components--forms-select--border-radius)',
           },
           'font-size': 'var(--c--theme--font--sizes--ml)',
-          'menu-background-color': '#fff',
+          'menu-background-color': '#ffffff',
           'item-background-color': {
             hover: 'var(--c--theme--colors--primary-300)',
           },
@@ -179,7 +126,7 @@ const config = {
           },
         },
         modal: {
-          'background-color': '#fff',
+          'background-color': '#ffffff',
         },
         button: {
           'border-radius': {
@@ -200,8 +147,8 @@ const config = {
           danger: {
             'color-hover': 'white',
             background: {
-              color: 'var(--c--theme--colors--danger-600)',
-              'color-hover': '#FF2725',
+              color: 'var(--c--theme--colors--danger-400)',
+              'color-hover': 'var(--c--theme--colors--danger-500)',
               'color-disabled': 'var(--c--theme--colors--danger-100)',
             },
           },
@@ -231,9 +178,7 @@ const config = {
             color: 'var(--c--theme--colors--primary-text)',
             'color-disabled': 'var(--c--theme--colors--greyscale-600)',
             background: {
-              color: 'var(--c--theme--colors--primary-100)',
-              'color-hover': 'var(--c--theme--colors--primary-300)',
-              'color-active': 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--primary-100)',
               'color-disabled': 'var(--c--theme--colors--greyscale-200)',
             },
           },
@@ -252,19 +197,19 @@ const config = {
     dsfr: {
       theme: {
         colors: {
-          'card-border': '#E5E5E5',
+          'card-border': '#ededed',
           'primary-text': '#000091',
-          'primary-100': '#ECECFE',
+          'primary-100': '#f5f5fe',
           'primary-150': '#F4F4FD',
-          'primary-200': '#E3E3FD',
-          'primary-300': '#CACAFB',
-          'primary-400': '#8585F6',
-          'primary-500': '#6A6AF4',
-          'primary-600': '#313178',
+          'primary-200': '#ececfe',
+          'primary-300': '#e3e3fd',
+          'primary-400': '#cacafb',
+          'primary-500': '#6a6af4',
+          'primary-600': '#000091',
           'primary-700': '#272747',
-          'primary-800': '#000091',
-          'primary-900': '#21213F',
-          'secondary-text': '#fff',
+          'primary-800': '#21213f',
+          'primary-900': '#1c1a36',
+          'secondary-text': '#FFFFFF',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -275,22 +220,16 @@ const config = {
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
           'greyscale-text': '#303C4B',
-          'greyscale-000': '#fff',
-          'greyscale-050': '#F6F6F6',
-          'greyscale-100': '#eee',
-          'greyscale-200': '#E5E5E5',
-          'greyscale-250': '#ddd',
-          'greyscale-300': '#CECECE',
-          'greyscale-350': '#ddd',
-          'greyscale-400': '#929292',
-          'greyscale-500': '#7C7C7C',
-          'greyscale-600': '#666666',
-          'greyscale-700': '#3A3A3A',
-          'greyscale-750': '#353535',
-          'greyscale-800': '#2A2A2A',
-          'greyscale-900': '#242424',
-          'greyscale-950': '#1E1E1E',
-          'greyscale-1000': '#161616',
+          'greyscale-000': '#f6f6f6',
+          'greyscale-100': '#eeeeee',
+          'greyscale-200': '#e5e5e5',
+          'greyscale-300': '#e1e1e1',
+          'greyscale-400': '#dddddd',
+          'greyscale-500': '#cecece',
+          'greyscale-600': '#7b7b7b',
+          'greyscale-700': '#666666',
+          'greyscale-800': '#2a2a2a',
+          'greyscale-900': '#1e1e1e',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -302,15 +241,15 @@ const config = {
           'success-800': '#1e2e22',
           'success-900': '#19281d',
           'info-text': '#0078f3',
-          'info-100': '#E8EDFF',
-          'info-200': '#DDE5FF',
-          'info-300': '#BCCDFF',
-          'info-400': '#518FFF',
-          'info-500': '#0078F3',
-          'info-600': '#0063CB',
-          'info-700': '#273961',
-          'info-800': '#222A3F',
-          'info-900': '#1D2437',
+          'info-100': '#f4f6ff',
+          'info-200': '#e8edff',
+          'info-300': '#dde5ff',
+          'info-400': '#bdcdff',
+          'info-500': '#0078f3',
+          'info-600': '#0063cb',
+          'info-700': '#f4f6ff',
+          'info-800': '#222a3f',
+          'info-900': '#1d2437',
           'warning-text': '#d64d00',
           'warning-100': '#fff4f3',
           'warning-200': '#ffe9e6',
@@ -321,16 +260,16 @@ const config = {
           'warning-700': '#5e2c21',
           'warning-800': '#3e241e',
           'warning-900': '#361e19',
-          'danger-text': '#FFF',
-          'danger-100': '#FFE9E9',
-          'danger-200': '#FFDDDD',
-          'danger-300': '#FFBDBD',
-          'danger-400': '#FF5655',
-          'danger-500': '#F60700',
-          'danger-600': '#CE0500',
-          'danger-700': '#642626',
+          'danger-text': '#e1000f',
+          'danger-100': '#fef4f4',
+          'danger-200': '#fee9e9',
+          'danger-300': '#fddede',
+          'danger-400': '#fcbfbf',
+          'danger-500': '#e1000f',
+          'danger-600': '#c9191e',
+          'danger-700': '#642727',
           'danger-800': '#412121',
-          'danger-900': '#391C1C',
+          'danger-900': '#3a1c1c',
         },
         font: {
           families: {
@@ -349,12 +288,8 @@ const config = {
         alert: {
           'border-radius': '0',
         },
-        modal: {
-          'width-small': '342px',
-        },
         button: {
-          'medium-height': '40px',
-          'medium-text-height': '40px',
+          'medium-height': '48px',
           'border-radius': '4px',
           primary: {
             background: {
@@ -362,9 +297,9 @@ const config = {
               'color-hover': '#1212ff',
               'color-active': '#2323ff',
             },
-            color: '#fff',
-            'color-hover': '#fff',
-            'color-active': '#fff',
+            color: '#ffffff',
+            'color-hover': '#ffffff',
+            'color-active': '#ffffff',
           },
           'primary-text': {
             background: {
@@ -386,7 +321,7 @@ const config = {
           },
           'tertiary-text': {
             background: {
-              'color-hover': 'var(--c--theme--colors--greyscale-100)',
+              'color-hover': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
             color: 'var(--c--theme--colors--primary-600)',
@@ -428,7 +363,7 @@ const config = {
         },
         'forms-input': {
           'border-radius': '4px',
-          'background-color': '#fff',
+          'background-color': '#ffffff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',
           'value-color': 'var(--c--theme--colors--primary-text)',
@@ -446,7 +381,7 @@ const config = {
           'item-font-size': '14px',
           'border-radius': '4px',
           'border-radius-hover': '4px',
-          'background-color': '#fff',
+          'background-color': '#ffffff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'border-color-hover': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',

src/frontend/apps/impress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-impress",
-  "version": "2.0.0",
+  "version": "1.10.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -15,37 +15,34 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@blocknote/core": "0.22.0",
-    "@blocknote/mantine": "0.22.0",
-    "@blocknote/react": "0.22.0",
+    "@blocknote/core": "*",
+    "@blocknote/mantine": "*",
+    "@blocknote/react": "*",
     "@gouvfr-lasuite/integration": "1.0.2",
     "@hocuspocus/provider": "2.15.0",
     "@openfun/cunningham-react": "2.9.4",
-    "@sentry/nextjs": "8.47.0",
-    "@tanstack/react-query": "5.62.11",
-    "cmdk": "1.0.4",
+    "@sentry/nextjs": "8.45.1",
+    "@tanstack/react-query": "5.62.7",
     "crisp-sdk-web": "1.0.25",
-    "i18next": "24.2.0",
+    "i18next": "24.1.0",
     "i18next-browser-languagedetector": "8.0.2",
     "idb": "8.0.1",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
-    "next": "15.1.3",
+    "next": "15.1.0",
     "react": "*",
     "react-aria-components": "1.5.0",
     "react-dom": "*",
-    "react-i18next": "15.4.0",
-    "react-intersection-observer": "9.13.1",
+    "react-i18next": "15.2.0",
     "react-select": "5.9.0",
     "styled-components": "6.1.13",
-    "use-debounce": "10.0.4",
     "y-protocols": "1.0.6",
-    "yjs": "13.6.21",
+    "yjs": "*",
     "zustand": "5.0.2"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
-    "@tanstack/react-query-devtools": "5.62.11",
+    "@tanstack/react-query-devtools": "5.62.7",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
@@ -56,7 +53,7 @@
     "@types/node": "*",
     "@types/react": "18.3.12",
     "@types/react-dom": "*",
-    "cross-env": "7.0.3",
+    "cross-env": "*",
     "dotenv": "16.4.7",
     "eslint-config-impress": "*",
     "fetch-mock": "9.11.0",

src/frontend/apps/impress/src/__tests__/pages.test.tsx

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import { AppWrapper } from '@/tests/utils';
+
+import Page from '../pages';
+
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      push: jest.fn(),
+    };
+  },
+}));
+
+jest.mock('@sentry/nextjs', () => ({
+  captureException: jest.fn(),
+  captureMessage: jest.fn(),
+  setUser: jest.fn(),
+}));
+
+describe('Page', () => {
+  it('checks Page rendering', () => {
+    render(<Page />, { wrapper: AppWrapper });
+
+    expect(
+      screen.getByRole('button', {
+        name: /Create a new document/i,
+      }),
+    ).toBeInTheDocument();
+  });
+});

src/frontend/apps/impress/src/components/BoxButton.tsx

@@ -1,13 +1,9 @@
-import { forwardRef } from 'react';
+import { ComponentPropsWithRef, forwardRef } from 'react';
 import { css } from 'styled-components';
 
 import { Box, BoxType } from './Box';
 
-export type BoxButtonType = BoxType & {
-  disabled?: boolean;
-};
-
-/**
+export type BoxButtonType = ComponentPropsWithRef<typeof BoxButton>;
 
 /**
  * Styleless button that extends the Box component.
@@ -22,7 +18,7 @@ export type BoxButtonType = BoxType & {
  *  </BoxButton>
  * ```
  */
-const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
+const BoxButton = forwardRef<HTMLDivElement, BoxType>(
   ({ $css, ...props }, ref) => {
     return (
       <Box
@@ -32,24 +28,14 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
         $margin="none"
         $padding="none"
         $css={css`
-          cursor: ${props.disabled ? 'not-allowed' : 'pointer'};
+          cursor: pointer;
           border: none;
           outline: none;
           transition: all 0.2s ease-in-out;
           font-family: inherit;
-
-          color: ${props.disabled
-            ? 'var(--c--theme--colors--greyscale-400) !important'
-            : 'inherit'};
           ${$css || ''}
         `}
         {...props}
-        onClick={(event: React.MouseEvent<HTMLDivElement>) => {
-          if (props.disabled) {
-            return;
-          }
-          props.onClick?.(event);
-        }}
       />
     );
   },

src/frontend/apps/impress/src/components/Card.tsx

@@ -17,7 +17,8 @@ export const Card = ({
       $background="white"
       $radius="4px"
       $css={css`
-        border: 1px solid ${colorsTokens()['greyscale-200']};
+        box-shadow: 2px 2px 5px ${colorsTokens()['greyscale-300']};
+        border: 1px solid ${colorsTokens()['card-border']};
         ${$css}
       `}
       {...props}

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -1,20 +1,19 @@
-import {
+import React, {
   PropsWithChildren,
   ReactNode,
   useEffect,
-  useRef,
   useState,
 } from 'react';
-import { Button, Popover } from 'react-aria-components';
+import { Button, DialogTrigger, Popover } from 'react-aria-components';
 import styled from 'styled-components';
 
 const StyledPopover = styled(Popover)`
   background-color: white;
   border-radius: 4px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-
+  padding: 0.5rem;
   border: 1px solid #dddddd;
-
+  opacity: 0;
   transition: opacity 0.2s ease-in-out;
 `;
 
@@ -27,15 +26,13 @@ const StyledButton = styled(Button)`
   font-family: Marianne, Arial, serif;
   font-weight: 500;
   font-size: 0.938rem;
-  padding: 0;
   text-wrap: nowrap;
 `;
 
-export interface DropButtonProps {
+interface DropButtonProps {
   button: ReactNode;
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
-  label?: string;
 }
 
 export const DropButton = ({
@@ -43,12 +40,10 @@ export const DropButton = ({
   isOpen = false,
   onOpenChange,
   children,
-  label,
 }: PropsWithChildren<DropButtonProps>) => {
+  const [opacity, setOpacity] = useState(false);
   const [isLocalOpen, setIsLocalOpen] = useState(isOpen);
 
-  const triggerRef = useRef(null);
-
   useEffect(() => {
     setIsLocalOpen(isOpen);
   }, [isOpen]);
@@ -56,25 +51,21 @@ export const DropButton = ({
   const onOpenChangeHandler = (isOpen: boolean) => {
     setIsLocalOpen(isOpen);
     onOpenChange?.(isOpen);
+    setTimeout(() => {
+      setOpacity(isOpen);
+    }, 10);
   };
 
   return (
-    <>
-      <StyledButton
-        ref={triggerRef}
-        onPress={() => onOpenChangeHandler(true)}
-        aria-label={label}
-      >
-        {button}
-      </StyledButton>
-
+    <DialogTrigger onOpenChange={onOpenChangeHandler} isOpen={isLocalOpen}>
+      <StyledButton>{button}</StyledButton>
       <StyledPopover
-        triggerRef={triggerRef}
+        style={{ opacity: opacity ? 1 : 0 }}
         isOpen={isLocalOpen}
         onOpenChange={onOpenChangeHandler}
       >
         {children}
       </StyledPopover>
-    </>
+    </DialogTrigger>
   );
 };

src/frontend/apps/impress/src/components/DropdownMenu.tsx

@@ -1,150 +0,0 @@
-import { PropsWithChildren, useState } from 'react';
-import { css } from 'styled-components';
-
-import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-
-export type DropdownMenuOption = {
-  icon?: string;
-  label: string;
-  testId?: string;
-  callback?: () => void | Promise<unknown>;
-  danger?: boolean;
-  isSelected?: boolean;
-  disabled?: boolean;
-  show?: boolean;
-};
-
-export type DropdownMenuProps = {
-  options: DropdownMenuOption[];
-  showArrow?: boolean;
-  label?: string;
-  arrowCss?: BoxProps['$css'];
-  topMessage?: string;
-};
-
-export const DropdownMenu = ({
-  options,
-  children,
-  showArrow = false,
-  arrowCss,
-  label,
-  topMessage,
-}: PropsWithChildren<DropdownMenuProps>) => {
-  const theme = useCunninghamTheme();
-  const spacings = theme.spacingsTokens();
-  const colors = theme.colorsTokens();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const onOpenChange = (isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
-  return (
-    <DropButton
-      isOpen={isOpen}
-      onOpenChange={onOpenChange}
-      label={label}
-      button={
-        showArrow ? (
-          <Box $direction="row" $align="center">
-            <div>{children}</div>
-            <Icon
-              $variation="600"
-              $css={
-                arrowCss ??
-                css`
-                  color: var(--c--theme--colors--primary-600);
-                `
-              }
-              iconName={isOpen ? 'arrow_drop_up' : 'arrow_drop_down'}
-            />
-          </Box>
-        ) : (
-          children
-        )
-      }
-    >
-      <Box $maxWidth="320px">
-        {topMessage && (
-          <Text
-            $variation="700"
-            $wrap="wrap"
-            $size="xs"
-            $weight="bold"
-            $padding={{ vertical: 'xs', horizontal: 'base' }}
-          >
-            {topMessage}
-          </Text>
-        )}
-        {options.map((option, index) => {
-          if (option.show !== undefined && !option.show) {
-            return;
-          }
-          const isDisabled = option.disabled !== undefined && option.disabled;
-          return (
-            <BoxButton
-              aria-label={option.label}
-              data-testid={option.testId}
-              $direction="row"
-              disabled={isDisabled}
-              onClick={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                onOpenChange?.(false);
-                void option.callback?.();
-              }}
-              key={option.label}
-              $align="center"
-              $justify="space-between"
-              $background={colors['greyscale-000']}
-              $color={colors['primary-600']}
-              $padding={{ vertical: 'xs', horizontal: 'base' }}
-              $width="100%"
-              $gap={spacings['base']}
-              $css={css`
-                border: none;
-                ${index === 0 &&
-                css`
-                  border-top-left-radius: 4px;
-                  border-top-right-radius: 4px;
-                `}
-                ${index === options.length - 1 &&
-                css`
-                  border-bottom-left-radius: 4px;
-                  border-bottom-right-radius: 4px;
-                `}
-                font-size: var(--c--theme--font--sizes--sm);
-                color: var(--c--theme--colors--greyscale-1000);
-                font-weight: 500;
-                cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
-                user-select: none;
-
-                &:hover {
-                  background-color: var(--c--theme--colors--greyscale-050);
-                }
-              `}
-            >
-              <Box $direction="row" $align="center" $gap={spacings['base']}>
-                {option.icon && (
-                  <Icon
-                    $size="20px"
-                    $theme="greyscale"
-                    $variation={isDisabled ? '400' : '1000'}
-                    iconName={option.icon}
-                  />
-                )}
-                <Text $variation={isDisabled ? '400' : '1000'}>
-                  {option.label}
-                </Text>
-              </Box>
-              {option.isSelected && (
-                <Icon iconName="check" $size="20px" $theme="greyscale" />
-              )}
-            </BoxButton>
-          );
-        })}
-      </Box>
-    </DropButton>
-  );
-};

src/frontend/apps/impress/src/components/Icon.tsx

@@ -1,19 +1,6 @@
-import { css } from 'styled-components';
-
 import { Text, TextType } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
-type IconProps = TextType & {
-  iconName: string;
-};
-export const Icon = ({ iconName, ...textProps }: IconProps) => {
-  return (
-    <Text $isMaterialIcon {...textProps}>
-      {iconName}
-    </Text>
-  );
-};
-
 interface IconBGProps extends TextType {
   iconName: string;
 }
@@ -42,21 +29,23 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
   );
 };
 
-type IconOptionsProps = TextType & {
-  isHorizontal?: boolean;
-};
+interface IconOptionsProps {
+  isOpen: boolean;
+  'aria-label': string;
+}
 
-export const IconOptions = ({ isHorizontal, ...props }: IconOptionsProps) => {
+export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
   return (
     <Text
-      {...props}
+      aria-label={props['aria-label']}
       $isMaterialIcon
-      $css={css`
+      $css={`
+        transition: all 0.3s ease-in-out;
+        transform: rotate(${isOpen ? '90' : '0'}deg);
         user-select: none;
-        ${props.$css}
       `}
     >
-      {isHorizontal ? 'more_horiz' : 'more_vert'}
+      more_vert
     </Text>
   );
 };

src/frontend/apps/impress/src/components/InfiniteScroll.tsx

@@ -1,16 +1,12 @@
-import { Button } from '@openfun/cunningham-react';
-import { PropsWithChildren } from 'react';
-import { useTranslation } from 'react-i18next';
-import { InView } from 'react-intersection-observer';
+import { PropsWithChildren, useEffect, useRef } from 'react';
 
-import { Box, BoxType, Icon } from '@/components';
+import { Box, BoxType } from '@/components';
 
 interface InfiniteScrollProps extends BoxType {
   hasMore: boolean;
   isLoading: boolean;
   next: () => void;
-  scrollContainer?: HTMLElement | null;
-  buttonLabel?: string;
+  scrollContainer: HTMLElement | null;
 }
 
 export const InfiniteScroll = ({
@@ -18,31 +14,42 @@ export const InfiniteScroll = ({
   hasMore,
   isLoading,
   next,
-  buttonLabel,
+  scrollContainer,
   ...boxProps
 }: PropsWithChildren<InfiniteScrollProps>) => {
-  const { t } = useTranslation();
-  const loadMore = (inView: boolean) => {
-    if (!inView || isLoading) {
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    if (!scrollContainer) {
       return;
     }
-    void next();
-  };
 
-  return (
-    <Box {...boxProps}>
-      {children}
-      <InView onChange={loadMore}>
-        {!isLoading && hasMore && (
-          <Button
-            onClick={() => void next()}
-            color="primary-text"
-            icon={<Icon iconName="arrow_downward" />}
-          >
-            {buttonLabel ?? t('Load more')}
-          </Button>
-        )}
-      </InView>
-    </Box>
-  );
+    const nextHandle = () => {
+      if (!hasMore || isLoading) {
+        return;
+      }
+
+      // To not wait until the end of the scroll to load more data
+      const heightFromBottom = 150;
+
+      const { scrollTop, clientHeight, scrollHeight } = scrollContainer;
+      if (scrollTop + clientHeight >= scrollHeight - heightFromBottom) {
+        next();
+      }
+    };
+
+    const handleScroll = () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+      timeout.current = setTimeout(nextHandle, 50);
+    };
+
+    scrollContainer.addEventListener('scroll', handleScroll);
+    return () => {
+      scrollContainer.removeEventListener('scroll', handleScroll);
+    };
+  }, [hasMore, isLoading, next, scrollContainer]);
+
+  return <Box {...boxProps}>{children}</Box>;
 };

src/frontend/apps/impress/src/components/LoadMoreText.tsx

@@ -1,35 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import { Box } from './Box';
-import { Icon } from './Icon';
-import { Text } from './Text';
-
-type LoadMoreTextProps = {
-  ['data-testid']?: string;
-};
-
-export const LoadMoreText = ({
-  'data-testid': dataTestId,
-}: LoadMoreTextProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Box
-      data-testid={dataTestId}
-      $direction="row"
-      $align="center"
-      $gap="0.4rem"
-      $padding={{ horizontal: '2xs', vertical: 'sm' }}
-    >
-      <Icon
-        $theme="primary"
-        $variation="800"
-        iconName="arrow_downward"
-        $size="md"
-      />
-      <Text $theme="primary" $variation="800">
-        {t('Load more')}
-      </Text>
-    </Box>
-  );
-};

src/frontend/apps/impress/src/components/Text.tsx

@@ -33,7 +33,6 @@ export interface TextProps extends BoxProps {
     | 'greyscale';
   $variation?:
     | 'text'
-    | '000'
     | '100'
     | '200'
     | '300'
@@ -42,8 +41,7 @@ export interface TextProps extends BoxProps {
     | '600'
     | '700'
     | '800'
-    | '900'
-    | '1000';
+    | '900';
 }
 
 export type TextType = ComponentPropsWithRef<typeof Text>;

src/frontend/apps/impress/src/components/__tests__/Box.spec.tsx

@@ -17,8 +17,8 @@ describe('<Box />', () => {
     );
 
     expect(screen.getByText('My Box')).toHaveStyle(`
-      padding-left: 2.5rem;
-      padding-right: 2.5rem;
+      padding-left: 4rem;
+      padding-right: 4rem;
       padding-top: 3rem;
       padding-bottom: 0.5rem;`);
   });

src/frontend/apps/impress/src/components/index.ts

@@ -2,12 +2,9 @@ export * from './Box';
 export * from './BoxButton';
 export * from './Card';
 export * from './DropButton';
-export * from './DropdownMenu';
 export * from './Icon';
 export * from './InfiniteScroll';
 export * from './Link';
-export * from './LoadMoreText';
 export * from './SideModal';
-export * from './separators';
 export * from './Text';
 export * from './TextErrors';

src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx

@@ -1,71 +0,0 @@
-import { Command } from 'cmdk';
-import { ReactNode, useRef } from 'react';
-
-import { hasChildrens } from '@/utils/children';
-
-import { Box } from '../Box';
-
-import { QuickSearchInput } from './QuickSearchInput';
-import { QuickSearchStyle } from './QuickSearchStyle';
-
-export type QuickSearchAction = {
-  onSelect?: () => void;
-  content: ReactNode;
-};
-
-export type QuickSearchData<T> = {
-  groupName: string;
-  elements: T[];
-  emptyString?: string;
-  startActions?: QuickSearchAction[];
-  endActions?: QuickSearchAction[];
-  showWhenEmpty?: boolean;
-};
-
-export type QuickSearchProps = {
-  onFilter?: (str: string) => void;
-  inputValue?: string;
-  inputContent?: ReactNode;
-  showInput?: boolean;
-  loading?: boolean;
-  label?: string;
-  placeholder?: string;
-  children?: ReactNode;
-};
-
-export const QuickSearch = ({
-  onFilter,
-  inputContent,
-  inputValue,
-  loading,
-  showInput = true,
-  label,
-  placeholder,
-  children,
-}: QuickSearchProps) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  return (
-    <>
-      <QuickSearchStyle />
-      <div className="quick-search-container">
-        <Command label={label} shouldFilter={false} ref={ref}>
-          {showInput && (
-            <QuickSearchInput
-              loading={loading}
-              withSeparator={hasChildrens(children)}
-              inputValue={inputValue}
-              onFilter={onFilter}
-              placeholder={placeholder}
-            >
-              {inputContent}
-            </QuickSearchInput>
-          )}
-          <Command.List>
-            <Box>{children}</Box>
-          </Command.List>
-        </Command>
-      </div>
-    </>
-  );
-};

src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx

@@ -1,66 +0,0 @@
-import { Command } from 'cmdk';
-import { ReactNode } from 'react';
-
-import { Box } from '../Box';
-
-import { QuickSearchData } from './QuickSearch';
-import { QuickSearchItem } from './QuickSearchItem';
-
-type Props<T> = {
-  group: QuickSearchData<T>;
-  renderElement?: (element: T) => ReactNode;
-  onSelect?: (element: T) => void;
-};
-
-export const QuickSearchGroup = <T,>({
-  group,
-  onSelect,
-  renderElement,
-}: Props<T>) => {
-  return (
-    <Box $margin={{ top: 'base' }}>
-      <Command.Group
-        key={group.groupName}
-        heading={group.groupName}
-        forceMount={false}
-      >
-        {group.startActions?.map((action, index) => {
-          return (
-            <QuickSearchItem
-              key={`${group.groupName}-action-${index}`}
-              onSelect={action.onSelect}
-            >
-              {action.content}
-            </QuickSearchItem>
-          );
-        })}
-        {group.elements.map((groupElement, index) => {
-          return (
-            <QuickSearchItem
-              id={`${group.groupName}-element-${index}`}
-              key={`${group.groupName}-element-${index}`}
-              onSelect={() => {
-                onSelect?.(groupElement);
-              }}
-            >
-              {renderElement?.(groupElement)}
-            </QuickSearchItem>
-          );
-        })}
-        {group.endActions?.map((action, index) => {
-          return (
-            <QuickSearchItem
-              key={`${group.groupName}-action-${index}`}
-              onSelect={action.onSelect}
-            >
-              {action.content}
-            </QuickSearchItem>
-          );
-        })}
-        {group.emptyString && group.elements.length === 0 && (
-          <span className="ml-b clr-greyscale-500">{group.emptyString}</span>
-        )}
-      </Command.Group>
-    </Box>
-  );
-};

src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx

@@ -1,69 +0,0 @@
-import { Loader } from '@openfun/cunningham-react';
-import { Command } from 'cmdk';
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { HorizontalSeparator } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-
-type Props = {
-  loading?: boolean;
-  inputValue?: string;
-  onFilter?: (str: string) => void;
-  placeholder?: string;
-  children?: ReactNode;
-  withSeparator?: boolean;
-};
-export const QuickSearchInput = ({
-  loading,
-  inputValue,
-  onFilter,
-  placeholder,
-  children,
-  withSeparator: separator = true,
-}: Props) => {
-  const { t } = useTranslation();
-  const { spacingsTokens } = useCunninghamTheme();
-  const spacing = spacingsTokens();
-
-  if (children) {
-    return (
-      <>
-        {children}
-        {separator && <HorizontalSeparator />}
-      </>
-    );
-  }
-
-  return (
-    <>
-      <Box
-        $direction="row"
-        $align="center"
-        className="quick-search-input"
-        $gap={spacing['2xs']}
-        $padding={{ all: 'base' }}
-      >
-        {!loading && <Icon iconName="search" $variation="600" />}
-        {loading && (
-          <div>
-            <Loader size="small" />
-          </div>
-        )}
-        <Command.Input
-          /* eslint-disable-next-line jsx-a11y/no-autofocus */
-          autoFocus={true}
-          aria-label={t('Quick search input')}
-          value={inputValue}
-          role="combobox"
-          placeholder={placeholder ?? t('Search')}
-          onValueChange={onFilter}
-        />
-      </Box>
-      {separator && <HorizontalSeparator $withPadding={false} />}
-    </>
-  );
-};

src/frontend/apps/impress/src/components/quick-search/QuickSearchItem.tsx

@@ -1,18 +0,0 @@
-import { Command } from 'cmdk';
-import { PropsWithChildren } from 'react';
-
-type Props = {
-  onSelect?: (value: string) => void;
-  id?: string;
-};
-export const QuickSearchItem = ({
-  children,
-  onSelect,
-  id,
-}: PropsWithChildren<Props>) => {
-  return (
-    <Command.Item value={id} onSelect={onSelect}>
-      {children}
-    </Command.Item>
-  );
-};

src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx

@@ -1,52 +0,0 @@
-import { ReactNode } from 'react';
-
-import { useCunninghamTheme } from '@/cunningham';
-import { useResponsiveStore } from '@/stores';
-
-import { Box } from '../Box';
-
-export type QuickSearchItemContentProps = {
-  alwaysShowRight?: boolean;
-  left: ReactNode;
-  right?: ReactNode;
-};
-
-export const QuickSearchItemContent = ({
-  alwaysShowRight = false,
-  left,
-  right,
-}: QuickSearchItemContentProps) => {
-  const { spacingsTokens } = useCunninghamTheme();
-  const spacings = spacingsTokens();
-
-  const { isDesktop } = useResponsiveStore();
-
-  return (
-    <Box
-      $direction="row"
-      $align="center"
-      $padding={{ horizontal: '2xs', vertical: '3xs' }}
-      $justify="space-between"
-      $width="100%"
-    >
-      <Box
-        $direction="row"
-        $align="center"
-        $gap={spacings['2xs']}
-        $width="100%"
-      >
-        {left}
-      </Box>
-
-      {isDesktop && right && (
-        <Box
-          className={!alwaysShowRight ? 'show-right-on-focus' : ''}
-          $direction="row"
-          $align="center"
-        >
-          {right}
-        </Box>
-      )}
-    </Box>
-  );
-};

src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx

@@ -1,143 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const QuickSearchStyle = createGlobalStyle`
-  .quick-search-container {
-    [cmdk-root] {
-        width: 100%;
-        background: #ffffff;
-        border-radius: 12px;
-        overflow: hidden;
-        transition: transform 100ms ease;
-        outline: none;
-  }
-
-  [cmdk-input] {
-    border: none;
-    width: 100%;
-    font-size: 17px;
-    padding: 8px;
-    background: white;
-    outline: none;
-    color: var(--c--theme--colors--greyscale-1000);
-    border-radius: 0;
-
-    &::placeholder {
-      color: var(--c--theme--colors--greyscale-500);
-    }
-  }
-
-
-
-  [cmdk-item] {
-    content-visibility: auto;
-    cursor: pointer;  
-    border-radius: var(--c--theme--spacings--xs);
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    user-select: none;
-    will-change: background, color;
-    transition: all 150ms ease;
-    transition-property: none;
-
-    .show-right-on-focus {
-      opacity: 0;
-    }
-
-    &:hover,
-    &[data-selected='true'] {
-      background: var(--c--theme--colors--greyscale-100);
-      .show-right-on-focus {
-        opacity: 1;
-      }
-    }
-
-    &[data-disabled='true'] {
-      color: var(--c--theme--colors--greyscale-500);
-      cursor: not-allowed;
-    }
-
-    & + [cmdk-item] {
-      margin-top: 4px;
-    }
-  }
-
-  [cmdk-list] {
-  
-    padding: 0 var(--c--theme--spacings--base) var(--c--theme--spacings--base)
-      var(--c--theme--spacings--base);
-  
-    flex:1;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-  }
-
-  [cmdk-vercel-shortcuts] {
-    display: flex;
-    margin-left: auto;
-    gap: 8px;
-
-    kbd {
-      font-size: 12px;
-      min-width: 20px;
-      padding: 4px;
-      height: 20px;
-      border-radius: 4px;
-      color: white;
-      background: var(--c--theme--colors--greyscale-500);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      text-transform: uppercase;
-    }
-  }
-
-  [cmdk-separator] {
-    height: 1px;
-    width: 100%;
-    background: var(--c--theme--colors--greyscale-500);
-    margin: 4px 0;
-  }
-
-  *:not([hidden]) + [cmdk-group] {
-    margin-top: 8px;
-  }
-
-  [cmdk-group-heading] {
-    user-select: none;
-    font-size: var(--c--theme--font--sizes--sm);
-    color: var(--c--theme--colors--greyscale-700);
-    font-weight: bold;
-
-    display: flex;
-    align-items: center;
-    margin-bottom: var(--c--theme--spacings--xs);
-  }
-
-  [cmdk-empty] {
-  }
-}
-
-
-
-.c__modal__scroller:has(.quick-search-container),
-.c__modal__scroller:has(.noPadding) {
-  padding: 0 !important;
-
-  .c__modal__close .c__button {
-    right: 5px;
-    top: 5px;
-    padding: 1.5rem 1rem;
-  }
-
-  .c__modal__title {
-    font-size: var(--c--theme--font--sizes--xs);
-    
-    padding: var(--c--theme--spacings--base);
-    margin-bottom: 0;
-  }
-}
-
-
-`;

src/frontend/apps/impress/src/components/quick-search/index.ts

@@ -1,4 +0,0 @@
-export * from './QuickSearch';
-export * from './QuickSearchGroup';
-export * from './QuickSearchItem';
-export * from './QuickSearchItemContent';

src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx

@@ -1,33 +0,0 @@
-import { useCunninghamTheme } from '@/cunningham';
-
-import { Box } from '../Box';
-
-export enum SeparatorVariant {
-  LIGHT = 'light',
-  DARK = 'dark',
-}
-
-type Props = {
-  variant?: SeparatorVariant;
-  $withPadding?: boolean;
-};
-
-export const HorizontalSeparator = ({
-  variant = SeparatorVariant.LIGHT,
-  $withPadding = true,
-}: Props) => {
-  const { colorsTokens } = useCunninghamTheme();
-
-  return (
-    <Box
-      $height="1px"
-      $width="100%"
-      $margin={{ vertical: $withPadding ? 'base' : 'none' }}
-      $background={
-        variant === SeparatorVariant.DARK
-          ? '#e5e5e533'
-          : colorsTokens()['greyscale-100']
-      }
-    />
-  );
-};

src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx

@@ -1,33 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { css } from 'styled-components';
-
-import { useCunninghamTheme } from '@/cunningham';
-
-import { Box } from '../Box';
-
-type Props = {
-  showSeparator?: boolean;
-};
-
-export const SeparatedSection = ({
-  showSeparator = true,
-  children,
-}: PropsWithChildren<Props>) => {
-  const theme = useCunninghamTheme();
-  const colors = theme.colorsTokens();
-  const spacings = theme.spacingsTokens();
-  return (
-    <Box
-      $css={css`
-        width: 100%;
-        padding: ${spacings['sm']} 0;
-        ${showSeparator &&
-        css`
-          border-bottom: 1px solid ${colors?.['greyscale-200']};
-        `}
-      `}
-    >
-      {children}
-    </Box>
-  );
-};

src/frontend/apps/impress/src/components/separators/index.ts

@@ -1,2 +0,0 @@
-export * from './HorizontalSeparator';
-export * from './SeparatedSection';

src/frontend/apps/impress/src/core/auth/ButtonLogin.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuthStore } from '@/core/auth';
@@ -9,14 +10,24 @@ export const ButtonLogin = () => {
 
   if (!authenticated) {
     return (
-      <Button onClick={login} color="primary-text" aria-label={t('Login')}>
+      <Button
+        onClick={login}
+        color="primary-text"
+        icon={<span className="material-icons">login</span>}
+        aria-label={t('Login')}
+      >
         {t('Login')}
       </Button>
     );
   }
 
   return (
-    <Button onClick={logout} color="primary-text" aria-label={t('Logout')}>
+    <Button
+      onClick={logout}
+      color="primary-text"
+      icon={<span className="material-icons">logout</span>}
+      aria-label={t('Logout')}
+    >
       {t('Logout')}
     </Button>
   );

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -351,19 +351,6 @@ input:-webkit-autofill:focus {
   background-color: transparent;
 }
 
-.c__button--nano {
-  padding: 0 var(--c--theme--spacings--3xs);
-  gap: var(--c--theme--spacings--3xs);
-}
-
-.c__button--nano.c__button--icon-only {
-  width: auto;
-}
-
-.c__button--nano.c__button--icon-only.c__button--full-width {
-  width: 100%;
-}
-
 .c__button--medium {
   padding: 0.9rem var(--c--theme--spacings--s);
 }
@@ -455,7 +442,6 @@ input:-webkit-autofill:focus {
 }
 
 .c__button--tertiary {
-  background-color: var(--c--components--button--tertiary--background--color);
   color: var(--c--components--button--tertiary--color);
   border: none;
 }
@@ -468,13 +454,6 @@ input:-webkit-autofill:focus {
   color: var(--c--components--button--tertiary--color);
 }
 
-.c__button--tertiary:active {
-  background-color: var(
-    --c--components--button--tertiary--background--color-active
-  );
-  color: var(--c--components--button--tertiary--color-active);
-}
-
 .c__button--tertiary:disabled {
   background-color: var(
     --c--components--button--tertiary--background--color-disabled
@@ -533,32 +512,13 @@ input:-webkit-autofill:focus {
 }
 
 .c__modal__close button {
-  padding: 0;
-  font-size: 88px;
-  width: 28px !important;
-  height: 28px;
-}
-
-.c__modal__close button .material-icons {
-  padding: 0;
-  font-size: 24px;
-  color: var(--c--theme--colors--greyscale-600);
-}
-
-.c__modal__close .c__button {
-  padding: 0 !important;
+  padding: 1.5rem 1rem;
 }
 
 .c__modal--full .c__modal__content {
   overflow-y: auto;
 }
 
-.c__modal__title {
-  padding: 0;
-  font-size: 1.125rem;
-  margin-bottom: var(--c--theme--spacings--2xs);
-}
-
 @media screen and (width <= 420px) {
   .c__modal__scroller {
     padding: 0.7rem;

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -13,7 +13,7 @@ export const tokens = {
           'secondary-700': '#97A3AE',
           'secondary-800': '#757E87',
           'secondary-900': '#596067',
-          'info-text': '#fff',
+          'info-text': '#FFFFFF',
           'info-100': '#EBF2FC',
           'info-200': '#8CB5EA',
           'info-300': '#5894E1',
@@ -32,7 +32,7 @@ export const tokens = {
           'greyscale-700': '#555F6B',
           'greyscale-800': '#303C4B',
           'greyscale-900': '#0C1A2B',
-          'greyscale-000': '#fff',
+          'greyscale-000': '#FFFFFF',
           'primary-100': '#EDF5FA',
           'primary-200': '#8CB5EA',
           'primary-300': '#5894E1',
@@ -69,65 +69,28 @@ export const tokens = {
           'danger-700': '#9B0000',
           'danger-800': '#780000',
           'danger-900': '#5C0000',
-          'primary-text': '#fff',
-          'success-text': '#fff',
-          'warning-text': '#fff',
-          'danger-text': '#fff',
+          'primary-text': '#FFFFFF',
+          'success-text': '#FFFFFF',
+          'warning-text': '#FFFFFF',
+          'danger-text': '#FFFFFF',
           'card-border': '#ededed',
           'primary-bg': '#FAFAFA',
-          'primary-050': '#F5F5FE',
           'primary-150': '#E5EEFA',
-          'primary-950': '#1B1B35',
           'info-150': '#E5EEFA',
-          'greyscale-1000': '#161616',
-          'blue-400': '#7AB1E8',
-          'blue-500': '#417DC4',
-          'blue-600': '#3558A2',
-          'brown-400': '#E6BE92',
-          'brown-500': '#BD987A',
-          'brown-600': '#745B47',
-          'cyan-400': '#34BAB5',
-          'cyan-500': '#009099',
-          'cyan-600': '#006A6F',
-          'gold-400': '#FFCA00',
-          'gold-500': '#C3992A',
-          'gold-600': '#695240',
-          'green-400': '#34CB6A',
-          'green-500': '#00A95F',
-          'green-600': '#297254',
-          'olive-400': '#99C221',
-          'olive-500': '#68A532',
-          'olive-600': '#447049',
-          'orange-400': '#FF732C',
-          'orange-500': '#E4794A',
-          'orange-600': '#755348',
-          'pink-400': '#FFB7AE',
-          'pink-500': '#E18B76',
-          'pink-600': '#8D533E',
-          'purple-400': '#CE70CC',
-          'purple-500': '#A558A0',
-          'purple-600': '#6E445A',
-          'yellow-400': '#D8C634',
-          'yellow-500': '#B7A73F',
-          'yellow-600': '#66673D',
         },
         font: {
           sizes: {
-            h1: '2rem',
-            h2: '1.75rem',
-            h3: '1.5rem',
-            h4: '1.375rem',
-            h5: '1.25rem',
-            h6: '1.125rem',
+            h1: '2.2rem',
+            h2: '1.7rem',
+            h3: '1.37rem',
+            h4: '1.15rem',
+            h5: '1rem',
+            h6: '0.87rem',
             l: '1rem',
             m: '0.8125rem',
             s: '0.75rem',
-            xs: '0.75rem',
-            sm: '0.875rem',
-            md: '1rem',
-            lg: '1.125rem',
             ml: '0.938rem',
-            xl: '1.25rem',
+            xl: '1.50rem',
             t: '0.6875rem',
           },
           weights: {
@@ -157,7 +120,7 @@ export const tokens = {
         },
         spacings: {
           '0': '0',
-          xl: '2.5rem',
+          xl: '4rem',
           l: '3rem',
           b: '1.625rem',
           s: '1rem',
@@ -167,20 +130,6 @@ export const tokens = {
           auto: 'auto',
           bx: '2.2rem',
           full: '100%',
-          '4xs': '0.125rem',
-          '3xs': '0.25rem',
-          '2xs': '0.375rem',
-          xs: '0.5rem',
-          sm: '0.75rem',
-          base: '1rem',
-          md: '1.5rem',
-          lg: '2rem',
-          xxl: '3rem',
-          xxxl: '3.5rem',
-          '4xl': '4rem',
-          '5xl': '4.5rem',
-          '6xl': '6rem',
-          '7xl': '7.5rem',
         },
         transitions: {
           'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
@@ -253,7 +202,7 @@ export const tokens = {
             focus: 'var(--c--components--forms-select--border-radius)',
           },
           'font-size': 'var(--c--theme--font--sizes--ml)',
-          'menu-background-color': '#fff',
+          'menu-background-color': '#ffffff',
           'item-background-color': {
             hover: 'var(--c--theme--colors--primary-300)',
           },
@@ -274,7 +223,7 @@ export const tokens = {
             'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
           },
         },
-        modal: { 'background-color': '#fff' },
+        modal: { 'background-color': '#ffffff' },
         button: {
           'border-radius': {
             active: 'var(--c--components--button--border-radius)',
@@ -294,8 +243,8 @@ export const tokens = {
           danger: {
             'color-hover': 'white',
             background: {
-              color: 'var(--c--theme--colors--danger-600)',
-              'color-hover': '#FF2725',
+              color: 'var(--c--theme--colors--danger-400)',
+              'color-hover': 'var(--c--theme--colors--danger-500)',
               'color-disabled': 'var(--c--theme--colors--danger-100)',
             },
           },
@@ -321,9 +270,7 @@ export const tokens = {
             color: 'var(--c--theme--colors--primary-text)',
             'color-disabled': 'var(--c--theme--colors--greyscale-600)',
             background: {
-              color: 'var(--c--theme--colors--primary-100)',
-              'color-hover': 'var(--c--theme--colors--primary-300)',
-              'color-active': 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--primary-100)',
               'color-disabled': 'var(--c--theme--colors--greyscale-200)',
             },
           },
@@ -387,19 +334,19 @@ export const tokens = {
     dsfr: {
       theme: {
         colors: {
-          'card-border': '#E5E5E5',
+          'card-border': '#ededed',
           'primary-text': '#000091',
-          'primary-100': '#ECECFE',
+          'primary-100': '#f5f5fe',
           'primary-150': '#F4F4FD',
-          'primary-200': '#E3E3FD',
-          'primary-300': '#CACAFB',
-          'primary-400': '#8585F6',
-          'primary-500': '#6A6AF4',
-          'primary-600': '#313178',
+          'primary-200': '#ececfe',
+          'primary-300': '#e3e3fd',
+          'primary-400': '#cacafb',
+          'primary-500': '#6a6af4',
+          'primary-600': '#000091',
           'primary-700': '#272747',
-          'primary-800': '#000091',
-          'primary-900': '#21213F',
-          'secondary-text': '#fff',
+          'primary-800': '#21213f',
+          'primary-900': '#1c1a36',
+          'secondary-text': '#FFFFFF',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -410,22 +357,16 @@ export const tokens = {
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
           'greyscale-text': '#303C4B',
-          'greyscale-000': '#fff',
-          'greyscale-050': '#F6F6F6',
-          'greyscale-100': '#eee',
-          'greyscale-200': '#E5E5E5',
-          'greyscale-250': '#ddd',
-          'greyscale-300': '#CECECE',
-          'greyscale-350': '#ddd',
-          'greyscale-400': '#929292',
-          'greyscale-500': '#7C7C7C',
-          'greyscale-600': '#666666',
-          'greyscale-700': '#3A3A3A',
-          'greyscale-750': '#353535',
-          'greyscale-800': '#2A2A2A',
-          'greyscale-900': '#242424',
-          'greyscale-950': '#1E1E1E',
-          'greyscale-1000': '#161616',
+          'greyscale-000': '#f6f6f6',
+          'greyscale-100': '#eeeeee',
+          'greyscale-200': '#e5e5e5',
+          'greyscale-300': '#e1e1e1',
+          'greyscale-400': '#dddddd',
+          'greyscale-500': '#cecece',
+          'greyscale-600': '#7b7b7b',
+          'greyscale-700': '#666666',
+          'greyscale-800': '#2a2a2a',
+          'greyscale-900': '#1e1e1e',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -437,15 +378,15 @@ export const tokens = {
           'success-800': '#1e2e22',
           'success-900': '#19281d',
           'info-text': '#0078f3',
-          'info-100': '#E8EDFF',
-          'info-200': '#DDE5FF',
-          'info-300': '#BCCDFF',
-          'info-400': '#518FFF',
-          'info-500': '#0078F3',
-          'info-600': '#0063CB',
-          'info-700': '#273961',
-          'info-800': '#222A3F',
-          'info-900': '#1D2437',
+          'info-100': '#f4f6ff',
+          'info-200': '#e8edff',
+          'info-300': '#dde5ff',
+          'info-400': '#bdcdff',
+          'info-500': '#0078f3',
+          'info-600': '#0063cb',
+          'info-700': '#f4f6ff',
+          'info-800': '#222a3f',
+          'info-900': '#1d2437',
           'warning-text': '#d64d00',
           'warning-100': '#fff4f3',
           'warning-200': '#ffe9e6',
@@ -456,16 +397,16 @@ export const tokens = {
           'warning-700': '#5e2c21',
           'warning-800': '#3e241e',
           'warning-900': '#361e19',
-          'danger-text': '#FFF',
-          'danger-100': '#FFE9E9',
-          'danger-200': '#FFDDDD',
-          'danger-300': '#FFBDBD',
-          'danger-400': '#FF5655',
-          'danger-500': '#F60700',
-          'danger-600': '#CE0500',
-          'danger-700': '#642626',
+          'danger-text': '#e1000f',
+          'danger-100': '#fef4f4',
+          'danger-200': '#fee9e9',
+          'danger-300': '#fddede',
+          'danger-400': '#fcbfbf',
+          'danger-500': '#e1000f',
+          'danger-600': '#c9191e',
+          'danger-700': '#642727',
           'danger-800': '#412121',
-          'danger-900': '#391C1C',
+          'danger-900': '#3a1c1c',
         },
         font: { families: { accent: 'Marianne', base: 'Marianne' } },
         logo: {
@@ -477,10 +418,8 @@ export const tokens = {
       },
       components: {
         alert: { 'border-radius': '0' },
-        modal: { 'width-small': '342px' },
         button: {
-          'medium-height': '40px',
-          'medium-text-height': '40px',
+          'medium-height': '48px',
           'border-radius': '4px',
           primary: {
             background: {
@@ -488,9 +427,9 @@ export const tokens = {
               'color-hover': '#1212ff',
               'color-active': '#2323ff',
             },
-            color: '#fff',
-            'color-hover': '#fff',
-            'color-active': '#fff',
+            color: '#ffffff',
+            'color-hover': '#ffffff',
+            'color-active': '#ffffff',
           },
           'primary-text': {
             background: {
@@ -509,7 +448,7 @@ export const tokens = {
           },
           'tertiary-text': {
             background: {
-              'color-hover': 'var(--c--theme--colors--greyscale-100)',
+              'color-hover': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
             color: 'var(--c--theme--colors--primary-600)',
@@ -547,7 +486,7 @@ export const tokens = {
         },
         'forms-input': {
           'border-radius': '4px',
-          'background-color': '#fff',
+          'background-color': '#ffffff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',
           'value-color': 'var(--c--theme--colors--primary-text)',
@@ -563,7 +502,7 @@ export const tokens = {
           'item-font-size': '14px',
           'border-radius': '4px',
           'border-radius-hover': '4px',
-          'background-color': '#fff',
+          'background-color': '#ffffff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'border-color-hover': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',

src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx

@@ -5,8 +5,6 @@ import { tokens } from './cunningham-tokens';
 
 type Tokens = typeof tokens.themes.default & Partial<typeof tokens.themes.dsfr>;
 type ColorsTokens = Tokens['theme']['colors'];
-type FontSizesTokens = Tokens['theme']['font']['sizes'];
-type SpacingsTokens = Tokens['theme']['spacings'];
 type ComponentTokens = Tokens['components'];
 export type Theme = keyof typeof tokens.themes;
 
@@ -15,8 +13,6 @@ interface AuthStore {
   setTheme: (theme: Theme) => void;
   themeTokens: () => Partial<Tokens['theme']>;
   colorsTokens: () => Partial<ColorsTokens>;
-  fontSizesTokens: () => Partial<FontSizesTokens>;
-  spacingsTokens: () => Partial<SpacingsTokens>;
   componentTokens: () => ComponentTokens;
 }
 
@@ -32,8 +28,6 @@ export const useCunninghamTheme = create<AuthStore>((set, get) => {
     themeTokens: () => currentTheme().theme,
     colorsTokens: () => currentTheme().theme.colors,
     componentTokens: () => currentTheme().components,
-    spacingsTokens: () => currentTheme().theme.spacings,
-    fontSizesTokens: () => currentTheme().theme.font.sizes,
     setTheme: (theme: Theme) => {
       set({ theme });
     },

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

@@ -4,13 +4,13 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
 import { useAuthStore } from '@/core/auth';
-import { Doc } from '@/features/docs/doc-management';
+import { Doc, Role, currentDocRole } from '@/features/docs/doc-management';
 
 import { useUploadFile } from '../hook';
 import { useHeadings } from '../hook/useHeadings';
@@ -22,53 +22,12 @@ import { BlockNoteToolbar } from './BlockNoteToolbar';
 
 const cssEditor = (readonly: boolean) => `
   &, & > .bn-container, & .ProseMirror {
-    height:100%;
-    
-      .bn-side-menu[data-block-type=heading][data-level="1"] { 
-         height: 50px; 
-     } 
-     .bn-side-menu[data-block-type=heading][data-level="2"] { 
-       height: 43px; 
-     } 
-    .bn-side-menu[data-block-type=heading][data-level="3"] {
-      height: 35px;
-    }
-    h1 {
-      font-size: 1.875rem;
-    }
-    h2 {
-      font-size: 1.5rem;
-    }
-    h3 {
-      font-size: 1.25rem;
-    }
-    a {
-      color: var(--c--theme--colors--greyscale-500);
-      cursor: pointer;
-    }
-    .bn-block-group
-      .bn-block-group
-      .bn-block-outer:not([data-prev-depth-changed]):before {
-      border-left: none;
-    }
-  }
-  
-  .bn-editor {
-    
-    color: var(--c--theme--colors--greyscale-700);
-  }
-  .bn-block-outer:not(:first-child) {
-    &:has(h1) {
-      padding-top: 32px;
-    }
-    &:has(h2) {
-      padding-top: 24px;
-    }
-    &:has(h3) {
-      padding-top: 16px;
-    }
+    height:100%
+  };
+  & .bn-editor {
+    padding-right: 30px;
+    ${readonly && `padding-left: 30px;`}
   };
-  
   & .bn-inline-content code {
     background-color: gainsboro;
     padding: 2px;
@@ -76,7 +35,8 @@ const cssEditor = (readonly: boolean) => `
   }
   @media screen and (width <= 560px) {
     & .bn-editor {
-      
+      padding-left: 40px;
+      padding-right: 10px;
       ${readonly && `padding-left: 10px;`}
     };
     .bn-side-menu[data-block-type=heading][data-level="1"] {
@@ -167,6 +127,23 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   );
   useHeadings(editor);
 
+  /**
+   * With the collaboration it gets complicated to create the initial block
+   * better to let Blocknote manage, then we update the block with the content.
+   */
+  useEffect(() => {
+    if (doc.content || currentDocRole(doc.abilities) !== Role.OWNER) {
+      return;
+    }
+
+    setTimeout(() => {
+      editor.updateBlock(editor.document[0], {
+        type: 'heading',
+        content: '',
+      });
+    }, 100);
+  }, [editor, doc.content, doc.abilities]);
+
   useEffect(() => {
     setEditor(editor);
 

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

@@ -1,36 +1,40 @@
-import { Loader } from '@openfun/cunningham-react';
+import { Alert, Loader, VariantType } from '@openfun/cunningham-react';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import { css } from 'styled-components';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
 
-import { Box, Text, TextErrors } from '@/components';
+import { Box, Card, Text, TextErrors } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { DocHeader, DocVersionHeader } from '@/features/docs/doc-header/';
+import { DocHeader } from '@/features/docs/doc-header';
 import {
   Doc,
   base64ToBlocknoteXmlFragment,
-  useProviderStore,
+  useDocStore,
 } from '@/features/docs/doc-management';
-import { TableContent } from '@/features/docs/doc-table-content/';
 import { Versions, useDocVersion } from '@/features/docs/doc-versioning/';
 import { useResponsiveStore } from '@/stores';
 
 import { BlockNoteEditor, BlockNoteEditorVersion } from './BlockNoteEditor';
+import { IconOpenPanelEditor, PanelEditor } from './PanelEditor';
 
 interface DocEditorProps {
   doc: Doc;
-  versionId?: Versions['version_id'];
 }
 
-export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
-  const { isDesktop } = useResponsiveStore();
+export const DocEditor = ({ doc }: DocEditorProps) => {
+  const {
+    query: { versionId },
+  } = useRouter();
+  const { t } = useTranslation();
+  const { isMobile } = useResponsiveStore();
 
-  const isVersion = !!versionId && typeof versionId === 'string';
+  const isVersion = versionId && typeof versionId === 'string';
 
   const { colorsTokens } = useCunninghamTheme();
 
-  const { provider } = useProviderStore();
+  const { providers } = useDocStore();
+  const provider = providers?.[doc.id];
 
   if (!provider) {
     return null;
@@ -38,41 +42,43 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
 
   return (
     <>
-      {isDesktop && !isVersion && (
-        <Box
-          $position="absolute"
-          $css={css`
-            top: 72px;
-            right: 20px;
-          `}
-        >
-          <TableContent />
+      <DocHeader doc={doc} />
+      {!doc.abilities.partial_update && (
+        <Box $margin={{ all: 'small', top: 'none' }}>
+          <Alert type={VariantType.WARNING}>
+            {t(`Read only, you cannot edit this document.`)}
+          </Alert>
         </Box>
       )}
-      <Box $maxWidth="868px" $width="100%" $height="100%">
-        <Box $padding={{ horizontal: isDesktop ? '54px' : 'base' }}>
-          {isVersion ? (
-            <DocVersionHeader title={doc.title} />
-          ) : (
-            <DocHeader doc={doc} />
-          )}
+      {isVersion && (
+        <Box $margin={{ all: 'small', top: 'none' }}>
+          <Alert type={VariantType.WARNING}>
+            {t(`Read only, you cannot edit document versions.`)}
+          </Alert>
         </Box>
-
-        <Box
-          $background={colorsTokens()['primary-bg']}
-          $direction="row"
-          $width="100%"
-          $css="overflow-x: clip; flex: 1;"
+      )}
+      <Box
+        $background={colorsTokens()['primary-bg']}
+        $height="100%"
+        $direction="row"
+        $margin={{ all: isMobile ? 'tiny' : 'small', top: 'none' }}
+        $css="overflow-x: clip;"
+        $position="relative"
+      >
+        <Card
+          $padding={isMobile ? 'small' : 'big'}
+          $css="flex:1;"
+          $overflow="auto"
           $position="relative"
         >
-          <Box $css="flex:1;" $overflow="auto" $position="relative">
-            {isVersion ? (
-              <DocVersionEditor docId={doc.id} versionId={versionId} />
-            ) : (
-              <BlockNoteEditor doc={doc} provider={provider} />
-            )}
-          </Box>
-        </Box>
+          {isVersion ? (
+            <DocVersionEditor docId={doc.id} versionId={versionId} />
+          ) : (
+            <BlockNoteEditor doc={doc} provider={provider} />
+          )}
+          {!isMobile && <IconOpenPanelEditor />}
+        </Card>
+        <PanelEditor doc={doc} />
       </Box>
     </>
   );

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

@@ -0,0 +1,197 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, BoxButton, Card, IconBG, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { Doc } from '@/features/docs/doc-management';
+import { TableContent } from '@/features/docs/doc-table-content';
+import { VersionList } from '@/features/docs/doc-versioning';
+import { useResponsiveStore } from '@/stores';
+
+import { useHeadingStore, usePanelEditorStore } from '../stores';
+
+interface PanelProps {
+  doc: Doc;
+}
+
+export const PanelEditor = ({ doc }: PropsWithChildren<PanelProps>) => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
+  const { isMobile } = useResponsiveStore();
+  const { isPanelTableContentOpen, setIsPanelTableContentOpen, isPanelOpen } =
+    usePanelEditorStore();
+
+  return (
+    <Card
+      $width="100%"
+      $maxWidth="20rem"
+      $position={isMobile ? 'absolute' : 'sticky'}
+      $height="100%"
+      $hasTransition="slow"
+      $css={`
+        top: 0vh;
+        right: 0;
+        transform: translateX(0%);
+        flex: 1;
+        margin-left: 1rem;
+        ${
+          !isPanelOpen &&
+          `
+            transform: translateX(200%);
+            opacity: 0;
+            flex: 0;
+            margin-left: 0rem;
+            max-width: 0rem;
+          `
+        }
+      `}
+      aria-label={t('Document panel')}
+      aria-hidden={!isPanelOpen}
+    >
+      <Box
+        $overflow="inherit"
+        $position="sticky"
+        $hasTransition="slow"
+        $css={`
+          top: 0;
+          opacity: ${isPanelOpen ? '1' : '0'};
+        `}
+        $maxHeight="99vh"
+      >
+        {isMobile && <IconOpenPanelEditor />}
+        <Box
+          $direction="row"
+          $justify="space-between"
+          $align="center"
+          $position="relative"
+          $background={colorsTokens()['primary-400']}
+          $margin={{ bottom: 'tiny' }}
+          $radius="4px 4px 0 0"
+        >
+          <Box
+            $background="white"
+            $position="absolute"
+            $height="100%"
+            $width={doc.abilities.versions_list ? '50%' : '100%'}
+            $hasTransition="slow"
+            $css={`
+                border-top: 2px solid ${colorsTokens()['primary-600']};
+                border-radius: 0 4px 0 0;
+                ${
+                  isPanelTableContentOpen
+                    ? `
+                      transform: translateX(0);
+                      border-radius: 4px 0 0 0;
+                    `
+                    : `transform: translateX(100%);`
+                }
+              `}
+          />
+          <BoxButton
+            $minWidth={doc.abilities.versions_list ? '50%' : '100%'}
+            onClick={() => setIsPanelTableContentOpen(true)}
+            $zIndex={1}
+          >
+            <Text
+              $width="100%"
+              $weight="bold"
+              $size="m"
+              $theme="primary"
+              $variation="600"
+              $padding={{ vertical: 'small', horizontal: 'small' }}
+            >
+              {t('Table of content')}
+            </Text>
+          </BoxButton>
+          {doc.abilities.versions_list && (
+            <BoxButton
+              $minWidth="50%"
+              onClick={() => setIsPanelTableContentOpen(false)}
+              $zIndex={1}
+            >
+              <Text
+                $width="100%"
+                $weight="bold"
+                $size="m"
+                $theme="primary"
+                $variation="600"
+                $padding={{ vertical: 'small', horizontal: 'small' }}
+              >
+                {t('Versions')}
+              </Text>
+            </BoxButton>
+          )}
+        </Box>
+        {isPanelTableContentOpen && <TableContent />}
+        {!isPanelTableContentOpen && doc.abilities.versions_list && (
+          <VersionList doc={doc} />
+        )}
+      </Box>
+    </Card>
+  );
+};
+
+export const IconOpenPanelEditor = () => {
+  const { headings } = useHeadingStore();
+  const { t } = useTranslation();
+  const { setIsPanelOpen, isPanelOpen, setIsPanelTableContentOpen } =
+    usePanelEditorStore();
+  const [hasBeenOpen, setHasBeenOpen] = useState(isPanelOpen);
+  const { isMobile } = useResponsiveStore();
+
+  const setClosePanel = () => {
+    setHasBeenOpen(true);
+    setIsPanelOpen(!isPanelOpen);
+  };
+
+  // Open the panel if there are more than 1 heading
+  useEffect(() => {
+    if (headings?.length && headings.length > 1 && !hasBeenOpen && !isMobile) {
+      setIsPanelTableContentOpen(true);
+      setIsPanelOpen(true);
+      setHasBeenOpen(true);
+    }
+  }, [
+    headings,
+    setIsPanelTableContentOpen,
+    setIsPanelOpen,
+    hasBeenOpen,
+    isMobile,
+  ]);
+
+  // If open from the doc header we set the state as well
+  useEffect(() => {
+    if (isPanelOpen && !hasBeenOpen) {
+      setHasBeenOpen(true);
+    }
+  }, [hasBeenOpen, isPanelOpen]);
+
+  // Close the panel unmount
+  useEffect(() => {
+    return () => {
+      setIsPanelOpen(false);
+    };
+  }, [setIsPanelOpen]);
+
+  return (
+    <IconBG
+      iconName="menu_open"
+      aria-label={isPanelOpen ? t('Close the panel') : t('Open the panel')}
+      $background="transparent"
+      $size="h2"
+      $zIndex={10}
+      $hasTransition="slow"
+      $css={`
+        cursor: pointer;
+        right: 0rem;
+        top: 0.1rem;
+        transform: rotate(${isPanelOpen ? '180deg' : '0deg'});
+        user-select: none;
+        ${hasBeenOpen ? 'display:flex;' : 'display: none;'}
+      `}
+      $position="absolute"
+      onClick={setClosePanel}
+      $radius="2px"
+    />
+  );
+};

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

@@ -1,17 +1,14 @@
-import { DateTime } from 'luxon';
+import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, HorizontalSeparator, Icon, Text } from '@/components';
+import { Box, Card, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import {
-  Doc,
-  LinkReach,
-  currentDocRole,
-  useTrans,
-} from '@/features/docs/doc-management';
+import { Doc, currentDocRole, useTrans } from '@/features/docs/doc-management';
+import { useDate } from '@/hook';
 import { useResponsiveStore } from '@/stores';
 
+import { DocTagPublic } from './DocTagPublic';
 import { DocTitle } from './DocTitle';
 import { DocToolBox } from './DocToolBox';
 
@@ -20,86 +17,89 @@ interface DocHeaderProps {
 }
 
 export const DocHeader = ({ doc }: DocHeaderProps) => {
-  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
-  const { isDesktop } = useResponsiveStore();
-  const spacings = spacingsTokens();
-  const colors = colorsTokens();
-
+  const { colorsTokens } = useCunninghamTheme();
   const { t } = useTranslation();
-  const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
-
+  const { formatDate } = useDate();
   const { transRole } = useTrans();
+  const { isMobile, isSmallMobile } = useResponsiveStore();
 
   return (
     <>
-      <Box
-        $width="100%"
-        $padding={{ top: isDesktop ? '4xl' : 'md' }}
-        $gap={spacings['base']}
+      <Card
+        $margin={isMobile ? 'tiny' : 'small'}
         aria-label={t('It is the card information about the document.')}
       >
-        {docIsPublic && (
-          <Box
-            aria-label={t('Public document')}
-            $color={colors['primary-800']}
-            $background={colors['primary-100']}
-            $radius={spacings['3xs']}
-            $direction="row"
-            $padding="xs"
-            $flex={1}
-            $align="center"
-            $gap={spacings['3xs']}
-            $css={css`
-              border: 1px solid var(--c--theme--colors--primary-300, #e3e3fd);
-            `}
-          >
-            <Icon
+        <Box
+          $padding={isMobile ? 'tiny' : 'small'}
+          $direction="row"
+          $align="center"
+        >
+          <StyledLink href="/">
+            <Text
+              $isMaterialIcon
               $theme="primary"
-              $variation="800"
-              data-testid="public-icon"
-              iconName="public"
-            />
-            <Text $theme="primary" $variation="800">
-              {t('Public document')}
+              $variation="600"
+              $size="2rem"
+              $css={css`
+                &:hover {
+                  background-color: ${colorsTokens()['primary-100']};
+                }
+              `}
+              $hasTransition
+              $radius="5px"
+              $padding="tiny"
+            >
+              home
             </Text>
-          </Box>
-        )}
-        <Box $direction="row" $align="center" $width="100%">
+          </StyledLink>
+          <Box
+            $width="1px"
+            $height="70%"
+            $background={colorsTokens()['greyscale-100']}
+            $margin={{ horizontal: 'tiny' }}
+          />
           <Box
             $direction="row"
             $justify="space-between"
             $css="flex:1;"
             $gap="0.5rem 1rem"
+            $wrap="wrap"
             $align="center"
           >
-            <Box $gap={spacings['3xs']}>
-              <DocTitle doc={doc} />
-
-              <Box $direction="row">
-                {isDesktop && (
-                  <>
-                    <Text $variation="600" $size="s" $weight="bold">
-                      {transRole(currentDocRole(doc.abilities))}&nbsp;·&nbsp;
-                    </Text>
-                    <Text $variation="600" $size="s">
-                      {t('Last update: {{update}}', {
-                        update: DateTime.fromISO(doc.updated_at).toRelative(),
-                      })}
-                    </Text>
-                  </>
-                )}
-                {!isDesktop && (
-                  <Text $variation="400" $size="s">
-                    {DateTime.fromISO(doc.updated_at).toRelative()}
-                  </Text>
-                )}
-              </Box>
-            </Box>
+            <DocTitle doc={doc} />
             <DocToolBox doc={doc} />
           </Box>
         </Box>
-        <HorizontalSeparator $withPadding={true} />
-      </Box>
+        <Box
+          $direction={isSmallMobile ? 'column' : 'row'}
+          $align={isSmallMobile ? 'start' : 'center'}
+          $css="border-top:1px solid #eee"
+          $padding={{
+            horizontal: isMobile ? 'tiny' : 'big',
+            vertical: 'tiny',
+          }}
+          $gap="0.5rem 2rem"
+          $justify="space-between"
+          $wrap="wrap"
+          $position="relative"
+        >
+          <Box
+            $direction={isSmallMobile ? 'column' : 'row'}
+            $align={isSmallMobile ? 'start' : 'center'}
+            $gap="0.5rem 2rem"
+            $wrap="wrap"
+          >
+            <DocTagPublic doc={doc} />
+            <Text $size="s" $display="inline">
+              {t('Created at')} <strong>{formatDate(doc.created_at)}</strong>
+            </Text>
+          </Box>
+          <Text $size="s" $display="inline">
+            {t('Your role:')}{' '}
+            <strong>{transRole(currentDocRole(doc.abilities))}</strong>
+          </Text>
+        </Box>
+      </Card>
     </>
   );
 };

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

@@ -5,12 +5,12 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
+import { useHeadingStore } from '@/features/docs/doc-editor';
 import {
   Doc,
   KEY_DOC,
@@ -19,50 +19,45 @@ import {
   useUpdateDoc,
 } from '@/features/docs/doc-management';
 import { useBroadcastStore, useResponsiveStore } from '@/stores';
+import { isFirefox } from '@/utils/userAgent';
 
 interface DocTitleProps {
   doc: Doc;
 }
 
 export const DocTitle = ({ doc }: DocTitleProps) => {
+  const { isMobile } = useResponsiveStore();
+
   if (!doc.abilities.partial_update) {
-    return <DocTitleText title={doc.title} />;
+    return (
+      <Text
+        as="h2"
+        $margin={{ all: 'none', left: 'tiny' }}
+        $size={isMobile ? 'h4' : 'h2'}
+      >
+        {doc.title}
+      </Text>
+    );
   }
 
   return <DocTitleInput doc={doc} />;
 };
 
-interface DocTitleTextProps {
-  title: string;
-}
-
-export const DocTitleText = ({ title }: DocTitleTextProps) => {
-  const { isMobile } = useResponsiveStore();
-  return (
-    <Text
-      as="h2"
-      $margin={{ all: 'none', left: 'none' }}
-      $size={isMobile ? 'h4' : 'h2'}
-      $variation="1000"
-    >
-      {title}
-    </Text>
-  );
-};
-
 const DocTitleInput = ({ doc }: DocTitleProps) => {
-  const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
   const [titleDisplay, setTitleDisplay] = useState(doc.title);
   const { toast } = useToastProvider();
   const { untitledDocument } = useTrans();
   const isUntitled = titleDisplay === untitledDocument;
-
+  const { headings } = useHeadingStore();
+  const headingText = headings?.[0]?.contentText;
+  const debounceRef = useRef<NodeJS.Timeout>();
+  const { isMobile } = useResponsiveStore();
   const { broadcast } = useBroadcastStore();
 
   const { mutate: updateDoc } = useUpdateDoc({
-    listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
+    listInvalideQueries: [KEY_LIST_DOC],
     onSuccess(data) {
       if (data.title !== untitledDocument) {
         toast(t('Document title updated successfully'), VariantType.SUCCESS);
@@ -86,7 +81,10 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
 
       // If mutation we update
       if (sanitizedTitle !== doc.title) {
-        setTitleDisplay(sanitizedTitle);
+        if (debounceRef.current) {
+          clearTimeout(debounceRef.current);
+          debounceRef.current = undefined;
+        }
         updateDoc({ id: doc.id, title: sanitizedTitle });
       }
     },
@@ -100,42 +98,74 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
     }
   };
 
+  const handleOnClick = () => {
+    if (isUntitled) {
+      setTitleDisplay('');
+    }
+  };
+
   useEffect(() => {
     setTitleDisplay(doc.title);
-  }, [doc]);
+  }, [doc.title]);
+
+  useEffect(() => {
+    if ((!debounceRef.current && !isUntitled) || !headingText) {
+      return;
+    }
+
+    setTitleDisplay(headingText);
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    debounceRef.current = setTimeout(() => {
+      handleTitleSubmit(headingText);
+      debounceRef.current = undefined;
+    }, 3000);
+  }, [isUntitled, handleTitleSubmit, headingText]);
 
   return (
     <>
       <Tooltip content={t('Rename')} placement="top">
         <Box
-          as="span"
-          role="textbox"
-          contentEditable
-          defaultValue={isUntitled ? undefined : titleDisplay}
+          as="h2"
+          $radius="4px"
+          $padding={{ horizontal: 'tiny', vertical: '4px' }}
+          $margin="none"
+          $minWidth="200px"
+          contentEditable={isFirefox() ? 'true' : 'plaintext-only'}
+          onClick={handleOnClick}
+          onBlurCapture={(e) =>
+            handleTitleSubmit(e.currentTarget.textContent || '')
+          }
           onKeyDownCapture={handleKeyDown}
           suppressContentEditableWarning={true}
-          aria-label="doc title input"
-          onBlurCapture={(event) =>
-            handleTitleSubmit(event.target.textContent || '')
+          $color={
+            isUntitled
+              ? colorsTokens()['greyscale-200']
+              : colorsTokens()['greyscale-text']
           }
-          $color={colorsTokens()['greyscale-1000']}
-          $margin={{ left: '-2px', right: '10px' }}
-          $css={css`
-            &[contenteditable='true']:empty:not(:focus):before {
-              content: '${untitledDocument}';
-              color: grey;
-              pointer-events: none;
-              font-style: italic;
+          $css={`
+            ${isUntitled && 'font-style: italic;'}
+            cursor: text;
+            font-size: ${isMobile ? '1.2rem' : '1.5rem'};
+            transition: box-shadow 0.5s, border-color 0.5s;
+            border: 1px dashed transparent;
+            
+            &:hover {
+              border-color: rgba(0, 123, 255, 0.25);
+              border-style: dashed;
             }
-            font-size: ${isDesktop
-              ? css`var(--c--theme--font--sizes--h2)`
-              : css`var(--c--theme--font--sizes--sm)`};
-            font-weight: 700;
 
-            outline: none;
+            &:focus {
+              outline: none;
+              border-color: transparent;
+              box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+            }
           `}
         >
-          {isUntitled ? '' : titleDisplay}
+          {titleDisplay}
         </Box>
       </Tooltip>
     </>

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

@@ -1,30 +1,24 @@
 import {
   Button,
   VariantType,
-  useModal,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { useQueryClient } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
 
-import {
-  Box,
-  DropdownMenu,
-  DropdownMenuOption,
-  Icon,
-  IconOptions,
-} from '@/components';
+import { Box, DropButton, IconOptions } from '@/components';
 import { useAuthStore } from '@/core';
-import { useCunninghamTheme } from '@/cunningham';
-import { useEditorStore } from '@/features/docs/doc-editor/';
-import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
-import { DocShareModal } from '@/features/docs/doc-share';
 import {
-  KEY_LIST_DOC_VERSIONS,
-  ModalSelectVersion,
-} from '@/features/docs/doc-versioning';
+  useEditorStore,
+  usePanelEditorStore,
+} from '@/features/docs/doc-editor/';
+import {
+  Doc,
+  ModalRemoveDoc,
+  ModalShare,
+} from '@/features/docs/doc-management';
+import { ModalVersion } from '@/features/docs/doc-versioning';
 import { useResponsiveStore } from '@/stores';
 
 import { ModalPDF } from './ModalExport';
@@ -34,78 +28,21 @@ interface DocToolBoxProps {
 }
 
 export const DocToolBox = ({ doc }: DocToolBoxProps) => {
+  const {
+    query: { versionId },
+  } = useRouter();
   const { t } = useTranslation();
-  const hasAccesses = doc.nb_accesses > 1;
-  const queryClient = useQueryClient();
-  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
-
-  const spacings = spacingsTokens();
-  const colors = colorsTokens();
-
+  const [isModalShareOpen, setIsModalShareOpen] = useState(false);
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
   const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
-  const selectHistoryModal = useModal();
-  const modalShare = useModal();
-
-  const { isSmallMobile, isDesktop } = useResponsiveStore();
+  const [isDropOpen, setIsDropOpen] = useState(false);
+  const { setIsPanelOpen, setIsPanelTableContentOpen } = usePanelEditorStore();
+  const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
+  const { isSmallMobile } = useResponsiveStore();
   const { authenticated } = useAuthStore();
   const { editor } = useEditorStore();
   const { toast } = useToastProvider();
 
-  const options: DropdownMenuOption[] = [
-    ...(isSmallMobile
-      ? [
-          {
-            label: t('Share'),
-            icon: 'upload',
-            callback: () => {
-              modalShare.open();
-            },
-          },
-          {
-            label: t('Export'),
-            icon: 'download',
-            callback: () => {
-              setIsModalPDFOpen(true);
-            },
-          },
-        ]
-      : []),
-
-    {
-      label: t('Version history'),
-      icon: 'history',
-      disabled: !doc.abilities.versions_list,
-      callback: () => {
-        selectHistoryModal.open();
-      },
-      show: isDesktop,
-    },
-
-    {
-      label: t('Copy as {{format}}', { format: 'Markdown' }),
-      icon: 'content_copy',
-      callback: () => {
-        void copyCurrentEditorToClipboard('markdown');
-      },
-    },
-    {
-      label: t('Copy as {{format}}', { format: 'HTML' }),
-      icon: 'content_copy',
-      callback: () => {
-        void copyCurrentEditorToClipboard('html');
-      },
-    },
-    {
-      label: t('Delete document'),
-      icon: 'delete',
-      disabled: !doc.abilities.destroy,
-      callback: () => {
-        setIsModalRemoveOpen(true);
-      },
-    },
-  ];
-
   const copyCurrentEditorToClipboard = async (
     asFormat: 'html' | 'markdown',
   ) => {
@@ -129,16 +66,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     }
   };
 
-  useEffect(() => {
-    if (selectHistoryModal.isOpen) {
-      return;
-    }
-
-    void queryClient.resetQueries({
-      queryKey: [KEY_LIST_DOC_VERSIONS],
-    });
-  }, [selectHistoryModal.isOpen, queryClient]);
-
   return (
     <Box
       $margin={{ left: 'auto' }}
@@ -147,88 +74,118 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       $gap="0.5rem 1.5rem"
       $wrap={isSmallMobile ? 'wrap' : 'nowrap'}
     >
-      <Box
-        $direction="row"
-        $align="center"
-        $margin={{ left: 'auto' }}
-        $gap={spacings['2xs']}
-      >
-        {authenticated && !isSmallMobile && (
-          <>
-            {!hasAccesses && (
-              <Button
-                color="tertiary-text"
-                onClick={() => {
-                  modalShare.open();
-                }}
-                size={isSmallMobile ? 'small' : 'medium'}
-              >
-                {t('Share')}
-              </Button>
-            )}
-            {hasAccesses && (
-              <Box
-                $css={css`
-                  .c__button--medium {
-                    height: 32px;
-                    padding: 10px var(--c--theme--spacings--xs);
-                    gap: 7px;
-                  }
-                `}
-              >
-                <Button
-                  color="tertiary"
-                  aria-label="Share button"
-                  icon={
-                    <Icon iconName="group" $theme="primary" $variation="800" />
-                  }
-                  onClick={() => {
-                    modalShare.open();
-                  }}
-                  size={isSmallMobile ? 'small' : 'medium'}
-                >
-                  {doc.nb_accesses}
-                </Button>
-              </Box>
-            )}
-          </>
-        )}
-        {!isSmallMobile && (
+      {versionId && (
+        <Box $margin={{ left: 'auto' }}>
           <Button
-            color="tertiary-text"
-            icon={
-              <Icon iconName="download" $theme="primary" $variation="800" />
-            }
             onClick={() => {
-              setIsModalPDFOpen(true);
+              setIsModalVersionOpen(true);
+            }}
+            color="secondary"
+            size={isSmallMobile ? 'small' : 'medium'}
+          >
+            {t('Restore this version')}
+          </Button>
+        </Box>
+      )}
+      <Box $direction="row" $margin={{ left: 'auto' }} $gap="1rem">
+        {authenticated && (
+          <Button
+            onClick={() => {
+              setIsModalShareOpen(true);
             }}
             size={isSmallMobile ? 'small' : 'medium'}
-          />
+          >
+            {t('Share')}
+          </Button>
         )}
-        <DropdownMenu options={options}>
-          <IconOptions
-            isHorizontal
-            $theme="primary"
-            $padding={{ all: 'xs' }}
-            $css={css`
-              border-radius: 4px;
-              &:hover {
-                background-color: ${colors['greyscale-100']};
-              }
-              ${isSmallMobile
-                ? css`
-                    padding: 10px;
-                    border: 1px solid ${colors['greyscale-300']};
-                  `
-                : ''}
-            `}
-            aria-label={t('Open the document options')}
-          />
-        </DropdownMenu>
+        <DropButton
+          button={
+            <IconOptions
+              isOpen={isDropOpen}
+              aria-label={t('Open the document options')}
+            />
+          }
+          onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
+          isOpen={isDropOpen}
+        >
+          <Box>
+            {doc.abilities.versions_list && (
+              <Button
+                onClick={() => {
+                  setIsPanelOpen(true);
+                  setIsPanelTableContentOpen(false);
+                  setIsDropOpen(false);
+                }}
+                color="primary-text"
+                icon={<span className="material-icons">history</span>}
+                size="small"
+              >
+                {t('Version history')}
+              </Button>
+            )}
+            <Button
+              onClick={() => {
+                setIsPanelOpen(true);
+                setIsPanelTableContentOpen(true);
+                setIsDropOpen(false);
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">summarize</span>}
+              size="small"
+            >
+              {t('Table of contents')}
+            </Button>
+            <Button
+              onClick={() => {
+                setIsModalPDFOpen(true);
+                setIsDropOpen(false);
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">file_download</span>}
+              size="small"
+            >
+              {t('Export')}
+            </Button>
+            {doc.abilities.destroy && (
+              <Button
+                onClick={() => {
+                  setIsModalRemoveOpen(true);
+                  setIsDropOpen(false);
+                }}
+                color="primary-text"
+                icon={<span className="material-icons">delete</span>}
+                size="small"
+              >
+                {t('Delete document')}
+              </Button>
+            )}
+            <Button
+              onClick={() => {
+                setIsDropOpen(false);
+                void copyCurrentEditorToClipboard('markdown');
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">content_copy</span>}
+              size="small"
+            >
+              {t('Copy as {{format}}', { format: 'Markdown' })}
+            </Button>
+            <Button
+              onClick={() => {
+                setIsDropOpen(false);
+                void copyCurrentEditorToClipboard('html');
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">content_copy</span>}
+              size="small"
+            >
+              {t('Copy as {{format}}', { format: 'HTML' })}
+            </Button>
+          </Box>
+        </DropButton>
       </Box>
-
-      {modalShare.isOpen && (
-        <DocShareModal onClose={() => modalShare.close()} doc={doc} />
+      {isModalShareOpen && (
+        <ModalShare onClose={() => setIsModalShareOpen(false)} doc={doc} />
       )}
       {isModalPDFOpen && (
         <ModalPDF onClose={() => setIsModalPDFOpen(false)} doc={doc} />
@@ -236,10 +193,11 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       {isModalRemoveOpen && (
         <ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />
       )}
-      {selectHistoryModal.isOpen && (
-        <ModalSelectVersion
-          onClose={() => selectHistoryModal.close()}
-          doc={doc}
+      {isModalVersionOpen && versionId && (
+        <ModalVersion
+          onClose={() => setIsModalVersionOpen(false)}
+          docId={doc.id}
+          versionId={versionId as string}
         />
       )}
     </Box>

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

@@ -1,31 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import { Box, HorizontalSeparator } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-
-import { DocTitleText } from './DocTitle';
-
-interface DocVersionHeaderProps {
-  title: string;
-}
-
-export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
-  const { spacingsTokens } = useCunninghamTheme();
-
-  const spacings = spacingsTokens();
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Box
-        $width="100%"
-        $padding={{ vertical: 'base' }}
-        $gap={spacings['base']}
-        aria-label={t('It is the document title')}
-      >
-        <DocTitleText title={title} />
-        <HorizontalSeparator />
-      </Box>
-    </>
-  );
-};

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

@@ -1,8 +1,11 @@
 import {
+  Alert,
   Button,
   Loader,
   Modal,
   ModalSize,
+  Radio,
+  RadioGroup,
   Select,
   VariantType,
   useToastProvider,
@@ -18,11 +21,6 @@ import { useExport } from '../api/useExport';
 import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { adaptBlockNoteHTML, downloadFile } from '../utils';
 
-export enum DocDownloadFormat {
-  PDF = 'pdf',
-  DOCX = 'docx',
-}
-
 interface ModalPDFProps {
   onClose: () => void;
   doc: Doc;
@@ -43,9 +41,7 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
     error,
   } = useExport();
   const [templateIdSelected, setTemplateIdSelected] = useState<string>();
-  const [format, setFormat] = useState<DocDownloadFormat>(
-    DocDownloadFormat.PDF,
-  );
+  const [format, setFormat] = useState<'pdf' | 'docx'>('pdf');
 
   const templateOptions = useMemo(() => {
     if (!templates?.pages) {
@@ -127,48 +123,61 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
 
   return (
     <Modal
-      data-testid="modal-export"
       isOpen
       closeOnClickOutside
+      hideCloseButton
+      leftActions={
+        <Button
+          aria-label={t('Close the modal')}
+          color="secondary"
+          fullWidth
+          onClick={() => onClose()}
+        >
+          {t('Cancel')}
+        </Button>
+      }
       onClose={() => onClose()}
       rightActions={
-        <>
-          <Button
-            aria-label={t('Close the modal')}
-            color="secondary"
-            fullWidth
-            onClick={() => onClose()}
-          >
-            {t('Cancel')}
-          </Button>
-          <Button
-            aria-label={t('Download')}
-            color="primary"
-            fullWidth
-            onClick={() => void onSubmit()}
-            disabled={isPending || !templateIdSelected}
-          >
-            {t('Download')}
-          </Button>
-        </>
+        <Button
+          aria-label={t('Download')}
+          color="primary"
+          fullWidth
+          onClick={() => void onSubmit()}
+          disabled={isPending || !templateIdSelected}
+        >
+          {t('Download')}
+        </Button>
       }
       size={ModalSize.MEDIUM}
       title={
-        <Text $size="h6" $variation="1000" $align="flex-start">
-          {t('Download')}
-        </Text>
+        <Box $align="center" $gap="1rem">
+          <Text
+            className="material-icons"
+            $size="3.5rem"
+            $theme="primary"
+            $variation="600"
+          >
+            picture_as_pdf
+          </Text>
+          <Text as="h2" $size="h3" $margin="none" $theme="primary">
+            {t('Export')}
+          </Text>
+        </Box>
       }
     >
       <Box
         $margin={{ bottom: 'xl' }}
         aria-label={t('Content modal to export the document')}
-        $gap="1rem"
+        $gap="1.5rem"
       >
-        <Text $variation="600" $size="sm">
-          {t(
-            'Upload your docs to a Microsoft Word, Open Office or PDF document.',
-          )}
-        </Text>
+        <Alert canClose={false} type={VariantType.INFO}>
+          <Text>
+            {t(
+              'Export your document, it will be inserted in the selected template.',
+            )}
+          </Text>
+        </Alert>
+
         <Select
           clearable={false}
           label={t('Template')}
@@ -178,19 +187,22 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
             setTemplateIdSelected(options.target.value as string)
           }
         />
-        <Select
-          clearable={false}
-          fullWidth
-          label={t('Format')}
-          options={[
-            { label: t('Word / Open Office'), value: DocDownloadFormat.DOCX },
-            { label: t('PDF'), value: DocDownloadFormat.PDF },
-          ]}
-          value={format}
-          onChange={(options) =>
-            setFormat(options.target.value as DocDownloadFormat)
-          }
-        />
+
+        <RadioGroup>
+          <Radio
+            label={t('PDF')}
+            value="pdf"
+            name="format"
+            onChange={(evt) => setFormat(evt.target.value as 'pdf')}
+            defaultChecked={true}
+          />
+          <Radio
+            label={t('Docx')}
+            value="docx"
+            name="format"
+            onChange={(evt) => setFormat(evt.target.value as 'docx')}
+          />
+        </RadioGroup>
 
         {isPending && (
           <Box $align="center" $margin={{ top: 'big' }}>

src/frontend/apps/impress/src/features/docs/doc-header/components/index.ts

@@ -1,2 +1 @@
 export * from './DocHeader';
-export * from './DocVersionHeader';

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

@@ -1,8 +1,6 @@
 export * from './useCreateDoc';
-export * from './useDeleteFavoriteDoc';
 export * from './useDoc';
 export * from './useDocOptions';
 export * from './useDocs';
-export * from './useCreateFavoriteDoc';
 export * from './useUpdateDoc';
 export * from './useUpdateDocLink';

src/frontend/apps/impress/src/features/docs/doc-management/api/useCreateFavoriteDoc.tsx

@@ -1,42 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
-import { APIError, errorCauses, fetchAPI } from '@/api';
-import { Doc } from '@/features/docs';
-
-export type CreateFavoriteDocParams = Pick<Doc, 'id'>;
-
-export const createFavoriteDoc = async ({ id }: CreateFavoriteDocParams) => {
-  const response = await fetchAPI(`documents/${id}/favorite/`, {
-    method: 'POST',
-  });
-
-  if (!response.ok) {
-    throw new APIError(
-      'Failed to make the doc as favorite',
-      await errorCauses(response),
-    );
-  }
-};
-
-interface CreateFavoriteDocProps {
-  onSuccess?: () => void;
-  listInvalideQueries?: string[];
-}
-
-export function useCreateFavoriteDoc({
-  onSuccess,
-  listInvalideQueries,
-}: CreateFavoriteDocProps) {
-  const queryClient = useQueryClient();
-  return useMutation<void, APIError, CreateFavoriteDocParams>({
-    mutationFn: createFavoriteDoc,
-    onSuccess: () => {
-      listInvalideQueries?.forEach((queryKey) => {
-        void queryClient.invalidateQueries({
-          queryKey: [queryKey],
-        });
-      });
-      onSuccess?.();
-    },
-  });
-}

src/frontend/apps/impress/src/features/docs/doc-management/api/useDeleteFavoriteDoc.tsx

@@ -1,42 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
-import { APIError, errorCauses, fetchAPI } from '@/api';
-import { Doc } from '@/features/docs';
-
-export type DeleteFavoriteDocParams = Pick<Doc, 'id'>;
-
-export const deleteFavoriteDoc = async ({ id }: DeleteFavoriteDocParams) => {
-  const response = await fetchAPI(`documents/${id}/favorite/`, {
-    method: 'DELETE',
-  });
-
-  if (!response.ok) {
-    throw new APIError(
-      'Failed to remove the doc as favorite',
-      await errorCauses(response),
-    );
-  }
-};
-
-interface DeleteFavoriteDocProps {
-  onSuccess?: () => void;
-  listInvalideQueries?: string[];
-}
-
-export function useDeleteFavoriteDoc({
-  onSuccess,
-  listInvalideQueries,
-}: DeleteFavoriteDocProps) {
-  const queryClient = useQueryClient();
-  return useMutation<void, APIError, DeleteFavoriteDocParams>({
-    mutationFn: deleteFavoriteDoc,
-    onSuccess: () => {
-      listInvalideQueries?.forEach((queryKey) => {
-        void queryClient.invalidateQueries({
-          queryKey: [queryKey],
-        });
-      });
-      onSuccess?.();
-    },
-  });
-}

src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx

@@ -1,12 +1,6 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 
-import {
-  APIError,
-  APIList,
-  errorCauses,
-  fetchAPI,
-  useAPIInfiniteQuery,
-} from '@/api';
+import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
 
 import { Doc } from '../types';
 
@@ -28,33 +22,16 @@ export type DocsOrdering = (typeof docsOrdering)[number];
 export type DocsParams = {
   page: number;
   ordering?: DocsOrdering;
-  is_creator_me?: boolean;
-  title?: string;
-  is_favorite?: boolean;
 };
 
 export type DocsResponse = APIList<Doc>;
-export const getDocs = async (params: DocsParams): Promise<DocsResponse> => {
-  const searchParams = new URLSearchParams();
-  if (params.page) {
-    searchParams.set('page', params.page.toString());
-  }
 
-  if (params.ordering) {
-    searchParams.set('ordering', params.ordering);
-  }
-  if (params.is_creator_me !== undefined) {
-    searchParams.set('is_creator_me', params.is_creator_me.toString());
-  }
-
-  if (params.title && params.title.length > 0) {
-    searchParams.set('title', params.title);
-  }
-  if (params.is_favorite !== undefined) {
-    searchParams.set('is_favorite', params.is_favorite.toString());
-  }
-
-  const response = await fetchAPI(`documents/?${searchParams.toString()}`);
+export const getDocs = async ({
+  ordering,
+  page,
+}: DocsParams): Promise<DocsResponse> => {
+  const orderingQuery = ordering ? `&ordering=${ordering}` : '';
+  const response = await fetchAPI(`documents/?page=${page}${orderingQuery}`);
 
   if (!response.ok) {
     throw new APIError('Failed to get the docs', await errorCauses(response));
@@ -75,7 +52,3 @@ export function useDocs(
     ...queryConfig,
   });
 }
-
-export const useInfiniteDocs = (params: DocsParams) => {
-  return useAPIInfiniteQuery(KEY_LIST_DOC, getDocs, params);
-};

src/frontend/apps/impress/src/features/docs/doc-management/api/useRemoveDoc.tsx

@@ -30,7 +30,7 @@ export const useRemoveDoc = (options?: UseRemoveDocOptions) => {
     mutationFn: removeDoc,
     ...options,
     onSuccess: (data, variables, context) => {
-      void queryClient.invalidateQueries({
+      void queryClient.resetQueries({
         queryKey: [KEY_LIST_DOC],
       });
       if (options?.onSuccess) {

src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDoc.tsx

@@ -38,7 +38,7 @@ export function useUpdateDoc({
     mutationFn: updateDoc,
     onSuccess: (data) => {
       listInvalideQueries?.forEach((queryKey) => {
-        void queryClient.invalidateQueries({
+        void queryClient.resetQueries({
           queryKey: [queryKey],
         });
       });

src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDocLink.tsx

@@ -44,7 +44,7 @@ export function useUpdateDocLink({
     mutationFn: updateDocLink,
     onSuccess: (data, variable) => {
       listInvalideQueries?.forEach((queryKey) => {
-        void queryClient.invalidateQueries({
+        void queryClient.resetQueries({
           queryKey: [queryKey],
         });
       });

src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx

@@ -0,0 +1,144 @@
+import {
+  Radio,
+  RadioGroup,
+  Select,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Card, IconBG } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { KEY_DOC, KEY_LIST_DOC, useUpdateDocLink } from '../api';
+import { Doc, LinkReach, LinkRole } from '../types';
+
+interface DocVisibilityProps {
+  doc: Doc;
+}
+
+export const DocVisibility = ({ doc }: DocVisibilityProps) => {
+  const { t } = useTranslation();
+  const { toast } = useToastProvider();
+  const { colorsTokens } = useCunninghamTheme();
+  const api = useUpdateDocLink({
+    onSuccess: () => {
+      toast(
+        t('The document visibility has been updated.'),
+        VariantType.SUCCESS,
+        {
+          duration: 4000,
+        },
+      );
+    },
+    listInvalideQueries: [KEY_LIST_DOC, KEY_DOC],
+  });
+
+  const transLinkReach = {
+    [LinkReach.RESTRICTED]: {
+      label: t('Restricted'),
+      description: t('Only for people with access'),
+    },
+    [LinkReach.AUTHENTICATED]: {
+      label: t('Authenticated'),
+      description: t('Only for authenticated users'),
+    },
+    [LinkReach.PUBLIC]: {
+      label: t('Public'),
+      description: t('Anyone on the internet with the link can view'),
+    },
+  };
+
+  const linkRoleList = [
+    {
+      label: t('Read only'),
+      value: LinkRole.READER,
+    },
+    {
+      label: t('Can read and edit'),
+      value: LinkRole.EDITOR,
+    },
+  ];
+
+  const showLinkRoleOptions = doc.link_reach !== LinkReach.RESTRICTED;
+
+  return (
+    <Card
+      $margin="tiny"
+      $padding={{ horizontal: 'small', vertical: 'tiny' }}
+      aria-label={t('Doc visibility card')}
+      $direction="row"
+      $align="center"
+      $justify="space-between"
+      $gap="1rem"
+      $wrap="wrap"
+    >
+      <IconBG iconName="public" />
+      <Box
+        $wrap="wrap"
+        $gap="1rem"
+        $direction="row"
+        $align="center"
+        $flex="1"
+        $css={`
+          & .c__field__footer .c__field__text {
+            ${!doc.abilities.link_configuration && `color: ${colorsTokens()['greyscale-400']};`};
+          }
+        `}
+      >
+        <Box $shrink="0" $flex="auto" $maxWidth="20rem">
+          <Select
+            label={t('Visibility')}
+            options={Object.values(LinkReach).map((linkReach) => ({
+              label: transLinkReach[linkReach].label,
+              value: linkReach,
+            }))}
+            onChange={(evt) =>
+              api.mutate({
+                link_reach: evt.target.value as LinkReach,
+                id: doc.id,
+              })
+            }
+            value={doc.link_reach}
+            clearable={false}
+            text={transLinkReach[doc.link_reach].description}
+            disabled={!doc.abilities.link_configuration}
+          />
+        </Box>
+        {showLinkRoleOptions && (
+          <Box
+            $css={`
+              & .c__checkbox{
+                padding: 0.15rem 0.25rem;
+              }
+            `}
+          >
+            <RadioGroup
+              compact
+              style={{
+                display: 'flex',
+              }}
+              text={t('How people can interact with the document')}
+            >
+              {linkRoleList.map((radio) => (
+                <Radio
+                  key={radio.value}
+                  label={radio.label}
+                  value={radio.value}
+                  onChange={() =>
+                    api.mutate({
+                      link_role: radio.value,
+                      id: doc.id,
+                    })
+                  }
+                  checked={doc.link_role === radio.value}
+                  disabled={!doc.abilities.link_configuration}
+                />
+              ))}
+            </RadioGroup>
+          </Box>
+        )}
+      </Box>
+    </Card>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -1,17 +1,19 @@
 import {
+  Alert,
   Button,
   Modal,
   ModalSize,
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { t } from 'i18next';
-import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'react-i18next';
 
 import { Box, Text, TextErrors } from '@/components';
+import { useCunninghamTheme } from '@/cunningham/';
 
 import { useRemoveDoc } from '../api/useRemoveDoc';
+import IconDoc from '../assets/icon-doc.svg';
 import { Doc } from '../types';
 
 interface ModalRemoveDocProps {
@@ -20,13 +22,13 @@ interface ModalRemoveDocProps {
 }
 
 export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
   const { toast } = useToastProvider();
   const { push } = useRouter();
-  const pathname = usePathname();
 
   const {
     mutate: removeDoc,
-
     isError,
     error,
   } = useRemoveDoc({
@@ -34,11 +36,7 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
       toast(t('The document has been deleted.'), VariantType.SUCCESS, {
         duration: 4000,
       });
-      if (pathname === '/') {
-        onClose();
-      } else {
-        void push('/');
-      }
+      void push('/');
     },
   });
 
@@ -46,48 +44,85 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
     <Modal
       isOpen
       closeOnClickOutside
+      hideCloseButton
+      leftActions={
+        <Button
+          aria-label={t('Close the modal')}
+          color="secondary"
+          fullWidth
+          onClick={() => onClose()}
+        >
+          {t('Cancel')}
+        </Button>
+      }
       onClose={() => onClose()}
       rightActions={
-        <>
-          <Button
-            aria-label={t('Close the modal')}
-            color="secondary"
-            fullWidth
-            onClick={() => onClose()}
-          >
-            {t('Cancel')}
-          </Button>
-          <Button
-            aria-label={t('Confirm deletion')}
-            color="danger"
-            fullWidth
-            onClick={() =>
-              removeDoc({
-                docId: doc.id,
-              })
-            }
-          >
-            {t('Delete')}
-          </Button>
-        </>
+        <Button
+          aria-label={t('Confirm deletion')}
+          color="primary"
+          fullWidth
+          onClick={() =>
+            removeDoc({
+              docId: doc.id,
+            })
+          }
+        >
+          {t('Confirm deletion')}
+        </Button>
       }
       size={ModalSize.MEDIUM}
       title={
-        <Text $size="h6" as="h6" $margin={{ all: '0' }} $align="flex-start">
-          {t('Delete a doc')}
-        </Text>
+        <Box $align="center" $gap="1rem">
+          <Text $isMaterialIcon $size="48px" $theme="primary" $variation="600">
+            delete_forever
+          </Text>
+          <Text as="h2" $size="h3" $margin="none">
+            {t('Deleting the document "{{title}}"', { title: doc.title })}
+          </Text>
+        </Box>
       }
     >
-      <Box aria-label={t('Content modal to delete document')}>
+      <Box
+        $margin={{ bottom: 'xl' }}
+        aria-label={t('Content modal to delete document')}
+      >
         {!isError && (
-          <Text $size="sm" $variation="600">
-            {t('Are you sure you want to delete the document "{{title}}"?', {
-              title: doc.title,
-            })}
-          </Text>
+          <Alert canClose={false} type={VariantType.WARNING}>
+            <Text>
+              {t('Are you sure you want to delete the document "{{title}}"?', {
+                title: doc.title,
+              })}
+            </Text>
+          </Alert>
         )}
 
         {isError && <TextErrors causes={error.cause} />}
+
+        <Text
+          as="p"
+          $padding="small"
+          $direction="row"
+          $gap="0.5rem"
+          $background={colorsTokens()['primary-150']}
+          $theme="primary"
+          $align="center"
+          $radius="2px"
+        >
+          <IconDoc
+            className="p-t"
+            aria-label={t(`Document icon`)}
+            color={colorsTokens()['primary-500']}
+            width={58}
+            style={{
+              borderRadius: '8px',
+              backgroundColor: '#ffffff',
+              border: `1px solid ${colorsTokens()['primary-300']}`,
+            }}
+          />
+          <Text $theme="primary" $weight="bold" $size="l">
+            {doc.title}
+          </Text>
+        </Text>
       </Box>
     </Modal>
   );

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx

@@ -0,0 +1,138 @@
+import {
+  Button,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+import { createGlobalStyle } from 'styled-components';
+
+import { Box, Card, IconBG, SideModal, Text } from '@/components';
+import { InvitationList } from '@/features/docs/members/invitation-list';
+import { AddMembers } from '@/features/docs/members/members-add';
+import { MemberList } from '@/features/docs/members/members-list';
+import { useResponsiveStore } from '@/stores';
+
+import { Doc } from '../types';
+import { currentDocRole } from '../utils';
+
+import { DocVisibility } from './DocVisibility';
+
+const ModalShareStyle = createGlobalStyle`
+  & .c__modal__scroller{
+    background: #FAFAFA;
+    padding: 1.5rem .5rem;
+
+    .c__modal__title{
+      padding: 0;
+      margin: 0;
+    }
+
+    .c__modal__close{
+      margin-right: 1rem;
+
+      button{
+        border-bottom: 1px solid #E0E0E0;
+        border-left: 1px solid #E0E0E0;
+      }
+    }
+  }
+`;
+
+interface ModalShareProps {
+  onClose: () => void;
+  doc: Doc;
+}
+
+export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
+  const { t } = useTranslation();
+  const { isMobile, isSmallMobile } = useResponsiveStore();
+  const width = isSmallMobile ? '100vw' : isMobile ? '90vw' : '70vw';
+  const { toast } = useToastProvider();
+
+  return (
+    <>
+      <ModalShareStyle />
+      <SideModal
+        isOpen
+        closeOnClickOutside
+        hideCloseButton={!isSmallMobile}
+        onClose={onClose}
+        width={width}
+        $css="min-width: 320px;max-width: 777px;"
+      >
+        <Box aria-label={t('Share modal')} $margin={{ bottom: 'small' }}>
+          <Box $shrink="0">
+            <Card
+              $direction="row"
+              $align="center"
+              $margin={{ horizontal: 'tiny', top: 'none', bottom: 'big' }}
+              $padding="tiny"
+              $gap="1rem"
+            >
+              <IconBG
+                $isMaterialIcon
+                $size="48px"
+                iconName="share"
+                $margin="none"
+              />
+              <Box
+                $justify="space-between"
+                $direction="row"
+                $align="center"
+                $width="100%"
+                $gap="1rem"
+                $wrap="wrap"
+              >
+                <Box $align="flex-start">
+                  <Text as="h3" $size="26px" $margin="none">
+                    {t('Share')}
+                  </Text>
+                  <Text $size="small" $weight="normal" $textAlign="left">
+                    {doc.title}
+                  </Text>
+                </Box>
+                <Box $margin={{ right: '1.5rem' }} $shrink="0">
+                  <Button
+                    onClick={() => {
+                      navigator.clipboard
+                        .writeText(window.location.href)
+                        .then(() => {
+                          toast(t('Link Copied !'), VariantType.SUCCESS, {
+                            duration: 3000,
+                          });
+                        })
+                        .catch(() => {
+                          toast(t('Failed to copy link'), VariantType.ERROR, {
+                            duration: 3000,
+                          });
+                        });
+                    }}
+                    color="primary"
+                    icon={<span className="material-icons">copy</span>}
+                  >
+                    {t('Copy link')}
+                  </Button>
+                </Box>
+              </Box>
+            </Card>
+            <DocVisibility doc={doc} />
+            {doc.abilities.accesses_manage && (
+              <AddMembers
+                doc={doc}
+                currentRole={currentDocRole(doc.abilities)}
+              />
+            )}
+          </Box>
+          <Box $minHeight="0">
+            {doc.abilities.accesses_view && (
+              <>
+                <InvitationList doc={doc} />
+                <MemberList doc={doc} />
+              </>
+            )}
+          </Box>
+        </Box>
+      </SideModal>
+    </>
+  );
+};

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

@@ -1 +1,2 @@
 export * from './ModalRemoveDoc';
+export * from './ModalShare';

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

@@ -1,2 +1 @@
-export * from './useCollaboration';
 export * from './useTrans';

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

@@ -1,40 +0,0 @@
-import { useEffect } from 'react';
-
-import { useCollaborationUrl } from '@/core/config';
-import { useBroadcastStore } from '@/stores';
-
-import { useProviderStore } from '../stores/useProviderStore';
-import { Base64 } from '../types';
-
-export const useCollaboration = (room?: string, initialContent?: Base64) => {
-  const collaborationUrl = useCollaborationUrl(room);
-  const { setBroadcastProvider } = useBroadcastStore();
-  const { provider, createProvider, destroyProvider } = useProviderStore();
-
-  useEffect(() => {
-    if (!room || !collaborationUrl || provider) {
-      return;
-    }
-
-    const newProvider = createProvider(collaborationUrl, room, initialContent);
-    setBroadcastProvider(newProvider);
-  }, [
-    provider,
-    collaborationUrl,
-    room,
-    initialContent,
-    createProvider,
-    setBroadcastProvider,
-  ]);
-
-  /**
-   * Destroy the provider when the component is unmounted
-   */
-  useEffect(() => {
-    return () => {
-      if (room) {
-        destroyProvider();
-      }
-    };
-  }, [destroyProvider, room]);
-};

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

@@ -6,32 +6,10 @@ export const useTrans = () => {
   const { t } = useTranslation();
 
   const translatedRoles = {
-    [Role.READER]: t('Reader'),
-    [Role.EDITOR]: t('Editor'),
     [Role.ADMIN]: t('Administrator'),
+    [Role.READER]: t('Reader'),
     [Role.OWNER]: t('Owner'),
-  };
-
-  const getNotAllowedMessage = (
-    canUpdate: boolean,
-    isLastOwner: boolean,
-    isOtherOwner: boolean,
-  ) => {
-    if (!canUpdate) {
-      return undefined;
-    }
-
-    if (isLastOwner) {
-      return t(
-        'You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.',
-      );
-    }
-
-    if (isOtherOwner) {
-      return t('You cannot update the role or remove other owner.');
-    }
-
-    return undefined;
+    [Role.EDITOR]: t('Editor'),
   };
 
   return {
@@ -39,7 +17,5 @@ export const useTrans = () => {
       return translatedRoles[role];
     },
     untitledDocument: t('Untitled document'),
-    translatedRoles,
-    getNotAllowedMessage,
   };
 };

src/frontend/apps/impress/src/features/docs/doc-management/stores/index.tsx

@@ -1,2 +1 @@
 export * from './useDocStore';
-export * from './useProviderStore';

src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx

@@ -1,14 +1,53 @@
+import { HocuspocusProvider } from '@hocuspocus/provider';
+import * as Y from 'yjs';
 import { create } from 'zustand';
 
-import { Doc } from '@/features/docs/doc-management';
+import { Base64, Doc } from '@/features/docs/doc-management';
 
 export interface UseDocStore {
   currentDoc?: Doc;
+  providers: {
+    [storeId: string]: HocuspocusProvider;
+  };
+  createProvider: (
+    providerUrl: string,
+    storeId: string,
+    initialDoc: Base64,
+  ) => HocuspocusProvider;
+  setProviders: (storeId: string, providers: HocuspocusProvider) => void;
   setCurrentDoc: (doc: Doc | undefined) => void;
 }
 
-export const useDocStore = create<UseDocStore>((set) => ({
+export const useDocStore = create<UseDocStore>((set, get) => ({
   currentDoc: undefined,
+  providers: {},
+  createProvider: (providerUrl, storeId, initialDoc) => {
+    const doc = new Y.Doc({
+      guid: storeId,
+    });
+
+    if (initialDoc) {
+      Y.applyUpdate(doc, Buffer.from(initialDoc, 'base64'));
+    }
+
+    const provider = new HocuspocusProvider({
+      url: providerUrl,
+      name: storeId,
+      document: doc,
+    });
+
+    get().setProviders(storeId, provider);
+
+    return provider;
+  },
+  setProviders: (storeId, provider) => {
+    set(({ providers }) => ({
+      providers: {
+        ...providers,
+        [storeId]: provider,
+      },
+    }));
+  },
   setCurrentDoc: (doc) => {
     set({ currentDoc: doc });
   },

src/frontend/apps/impress/src/features/docs/doc-management/stores/useProviderStore.tsx

@@ -1,52 +0,0 @@
-import { HocuspocusProvider } from '@hocuspocus/provider';
-import * as Y from 'yjs';
-import { create } from 'zustand';
-
-import { Base64 } from '@/features/docs/doc-management';
-
-export interface UseCollaborationStore {
-  createProvider: (
-    providerUrl: string,
-    storeId: string,
-    initialDoc?: Base64,
-  ) => HocuspocusProvider;
-  destroyProvider: () => void;
-  provider: HocuspocusProvider | undefined;
-}
-
-const defaultValues = {
-  provider: undefined,
-};
-
-export const useProviderStore = create<UseCollaborationStore>((set, get) => ({
-  ...defaultValues,
-  createProvider: (wsUrl, storeId, initialDoc) => {
-    const doc = new Y.Doc({
-      guid: storeId,
-    });
-
-    if (initialDoc) {
-      Y.applyUpdate(doc, Buffer.from(initialDoc, 'base64'));
-    }
-
-    const provider = new HocuspocusProvider({
-      url: wsUrl,
-      name: storeId,
-      document: doc,
-    });
-
-    set({
-      provider,
-    });
-
-    return provider;
-  },
-  destroyProvider: () => {
-    const provider = get().provider;
-    if (provider) {
-      provider.destroy();
-    }
-
-    set(defaultValues);
-  },
-}));

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

@@ -59,9 +59,3 @@ export interface Doc {
     versions_retrieve: boolean;
   };
 }
-
-export enum DocDefaultFilter {
-  ALL_DOCS = 'all_docs',
-  MY_DOCS = 'my_docs',
-  SHARED_WITH_ME = 'shared_with_me',
-}