wip

In the new interface, the export modal changes a little.

- We put the buttons on the right
- We remove the alert
- We transform the radio into select

.github/workflows/deploy.yml

@@ -1,52 +0,0 @@
-name: Deploy
-
-on:
-  push:
-    tags:
-      - 'preprod'
-      - 'production'
-
-
-jobs:
-  notify-argocd:
-    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@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 ''${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
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${ARGOCD_PRODUCTION_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_PRODUCTION_WEBHOOK_URL
-
-  start-test-on-preprod:
-    needs:
-      - notify-argocd
-    runs-on: ubuntu-latest
-    if: startsWith(github.event.ref, 'refs/tags/preprod')
-    steps:
-      -
-        name: Debug
-        run: |
-          echo "Start test when preprod is ready"

.github/workflows/docker-hub.yml

@@ -6,6 +6,7 @@ on:
   push:
     branches:
       - 'main'
+      - 'main-new-ui'
     tags:
       - 'v*'
   pull_request:
@@ -55,6 +56,7 @@ jobs:
         with:
           docker-build-args: '--target backend-production -f Dockerfile'
           docker-image-name: 'docker.io/lasuite/impress-backend:${{ github.sha }}'
+        continue-on-error: true
       -
         name: Build and push
         uses: docker/build-push-action@v6
@@ -105,6 +107,7 @@ jobs:
         with:
           docker-build-args: '-f src/frontend/Dockerfile --target frontend-production'
           docker-image-name: 'docker.io/lasuite/impress-frontend:${{ github.sha }}'
+        continue-on-error: true
       -
         name: Build and push
         uses: docker/build-push-action@v6
@@ -156,6 +159,7 @@ jobs:
         with:
           docker-build-args: '-f src/frontend/Dockerfile --target y-provider'
           docker-image-name: 'docker.io/lasuite/impress-frontend:${{ github.sha }}'
+        continue-on-error: true
       -
         name: Build and push
         uses: docker/build-push-action@v6

.github/workflows/impress-frontend.yml

@@ -99,7 +99,7 @@ jobs:
       - name: Run e2e tests
         run: cd src/frontend/ && yarn e2e:test --project='chromium'
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-chromium-report
@@ -133,7 +133,7 @@ jobs:
       - name: Run e2e tests
         run: cd src/frontend/ && yarn e2e:test --project=firefox --project=webkit
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-other-report

.github/workflows/impress.yml

@@ -107,7 +107,9 @@ jobs:
       - name: Install Python
         uses: actions/setup-python@v3
         with:
-          python-version: "3.10"
+          python-version: "3.12.6"
+      - name: Upgrade pip and setuptools
+        run: pip install --upgrade pip setuptools
       - name: Install development dependencies
         run: pip install --user .[dev]
       - name: Check code formatting with ruff
@@ -199,7 +201,7 @@ jobs:
       - name: Install Python
         uses: actions/setup-python@v3
         with:
-          python-version: "3.10"
+          python-version: "3.12.6"
 
       - name: Install development dependencies
         run: pip install --user .[dev]

CHANGELOG.md

@@ -9,23 +9,94 @@ and this project adheres to
 
 ## [Unreleased]
 
+
+## [1.8.0] - 2024-11-25
+
+## Added
+
+- 🌐(backend) add german translation #259
+- 🌐(frontend) Add German translation #255
+- ✨(frontend) Add a broadcast store #387
+- ✨(frontend) WIP: New ui
+- 💄(frontend) Add left panel #420
+- 💄(frontend) updating the header and leftpanel for responsive #421
+- ✨(backend) config endpoint #425
+- 💄(frontend) update DocsGrid component #431
+- ✨(backend) whitelist pod's IP address #443
+- ✨(backend) config endpoint #425
+- ✨(frontend) config endpoint #424
+- ✨(frontend) add sentry #424
+- ✨(frontend) add crisp chatbot #450
+- 💄(frontend) update DocsGridOptions component #432
+- 💄(frontend) update DocHeader ui #446
+
+
+## Changed
+
+- 🚸(backend) improve users similarity search and sort results #391
+- ♻️(frontend) simplify stores #402
+- ✨(frontend) update $css Box props type to add styled components RuleSet #423
+- ✅(CI) trivy continue on error #453
+
+## Fixed
+
+- 🔧(backend) fix logging for docker and make it configurable by envar #427
+- 🦺(backend) add comma to sub regex #408
+- 🐛(editor) collaborative user tag hidden when read only #385
+- 🐛(frontend) users have view access when revoked #387
+- 🐛(frontend) fix placeholder editable when double clicks #454
+
+
+## [1.7.0] - 2024-10-24
+
+## Added
+
+- 📝Contributing.md #352
+- 🌐(frontend) add localization to editor #368
+- ✨Public and restricted doc editable #357
+- ✨(frontend) Add full name if available #380
+- ✨(backend) Add view accesses ability #376
+
+## Changed
+
+- ♻️(frontend) list accesses if user has abilities #376
+- ♻️(frontend) avoid documents indexing in search engine #372
+- 👔(backend) doc restricted by default #388
+
+## Fixed
+
+- 🐛(backend) require right to manage document accesses to see invitations #369
+- 🐛(i18n) same frontend and backend language using shared cookies #365
+- 🐛(frontend) add default toolbar buttons #355
+- 🐛(frontend) throttle error correctly display #378
+
+## Removed
+
+- 🔥(helm) remove infra related codes #366
+
+
+## [1.6.0] - 2024-10-17
+
 ## Added
 
 - ✨AI to doc editor #250
 - ✨(backend) allow uploading more types of attachments #309
-- ✨(frontend) add buttons to copy document to clipboard as HTML/Markdown #300
+- ✨(frontend) add buttons to copy document to clipboard as HTML/Markdown #318
 
 ## Changed
 
-- ♻️(frontend) More multi theme friendly #325
+- ♻️(frontend) more multi theme friendly #325
 - ♻️ Bootstrap frontend #257
 - ♻️ Add username in email #314
 
 ## Fixed
 
+- 🛂(backend) do not duplicate user when disabled
 - 🐛(frontend) invalidate queries after removing user #336
 - 🐛(backend) Fix dysfunctional permissions on document create #329
 - 🐛(backend) fix nginx docker container #340
+- 🐛(frontend) fix copy paste firefox #353
+
 
 ## [1.5.1] - 2024-10-10
 
@@ -205,7 +276,10 @@ and this project adheres to
 - 🚀 Impress, project to manage your documents easily and collaboratively.
 
 
-[unreleased]: https://github.com/numerique-gouv/impress/compare/v1.5.1...main
+[unreleased]: https://github.com/numerique-gouv/impress/compare/v1.8.0...main
+[v1.8.0]: https://github.com/numerique-gouv/impress/releases/v1.8.0
+[v1.7.0]: https://github.com/numerique-gouv/impress/releases/v1.7.0
+[v1.6.0]: https://github.com/numerique-gouv/impress/releases/v1.6.0
 [1.5.1]: https://github.com/numerique-gouv/impress/releases/v1.5.1
 [1.5.0]: https://github.com/numerique-gouv/impress/releases/v1.5.0
 [1.4.0]: https://github.com/numerique-gouv/impress/releases/v1.4.0

CONTRIBUTING.md

@@ -0,0 +1,79 @@
+# Contributing to the Project
+
+Thank you for taking the time to contribute! Please follow these guidelines to ensure a smooth and productive workflow. 🚀🚀🚀
+
+To get started with the project, please refer to the [README.md](https://github.com/numerique-gouv/impress/blob/main/README.md) for detailed instructions.
+
+## Creating an Issue
+
+When creating an issue, please provide the following details:
+
+1.  **Title**: A concise and descriptive title for the issue.
+2.  **Description**: A detailed explanation of the issue, including relevant context or screenshots if applicable.
+3.  **Steps to Reproduce**: If the issue is a bug, include the steps needed to reproduce the problem.
+4.  **Expected vs. Actual Behavior**: Describe what you expected to happen and what actually happened.
+5.  **Labels**: Add appropriate labels to categorize the issue (e.g., bug, feature request, documentation).
+
+## Selecting an issue
+
+We use a [GitHub Project](https://github.com/orgs/numerique-gouv/projects/13) in order to prioritize our workload. 
+
+Please check in priority the issues that are in the **todo** column and have a higher priority (P0 -> P2). 
+
+## Commit Message Format
+
+All commit messages must adhere to the following format:
+
+`<gitmoji>(type) title description`
+
+*   <**gitmoji**>: Use a gitmoji to represent the purpose of the commit. For example, ✨ for adding a new feature or 🔥 for removing something, see the list here: <https://gitmoji.dev/>.
+*   **(type)**: Describe the type of change. Common types include `backend`, `frontend`, `CI`, `docker` etc...
+*   **title**: A short, descriptive title for the change, starting with a lowercase character.
+*   **description**: Include additional details about what was changed and why.
+
+### Example Commit Message
+
+```
+✨(frontend) add user authentication logic 
+
+Implemented login and signup features, and integrated OAuth2 for social login.
+```
+
+## Changelog Update
+
+Please add a line to the changelog describing your development. The changelog entry should include a brief summary of the changes, this helps in tracking changes effectively and keeping everyone informed. We usually include the title of the pull request, followed by the pull request ID to finish the log entry. The changelog line should be less than 80 characters in total.
+
+### Example Changelog Message
+```
+## [Unreleased]
+
+## Added
+
+- ✨(frontend) add AI to the project #321
+```
+
+## Pull Requests
+
+It is nice to add information about the purpose of the pull request to help reviewers understand the context and intent of the changes. If you can, add some pictures or a small video to show the changes.
+
+### Don't forget to: 
+- check your commits
+- check the linting: `make lint && make frontend-lint`
+- check the tests: `make test`
+- add a changelog entry
+
+Once all the required tests have passed, you can request a review from the project maintainers.
+
+## Code Style
+
+Please maintain consistency in code style. Run any linting tools available to make sure the code is clean and follows the project's conventions.
+
+## Tests
+
+Make sure that all new features or fixes have corresponding tests. Run the test suite before pushing your changes to ensure that nothing is broken.
+
+## Asking for Help
+
+If you need any help while contributing, feel free to open a discussion or ask for guidance in the issue tracker. We are more than happy to assist!
+
+Thank you for your contributions! 👍

Makefile

@@ -314,6 +314,10 @@ frontend-install: ## install the frontend locally
 	cd $(PATH_FRONT_IMPRESS) && yarn
 .PHONY: frontend-install
 
+frontend-lint: ## run the frontend linter
+	cd $(PATH_FRONT) && yarn lint
+.PHONY: frontend-lint
+
 run-frontend-development: ## Run the frontend in development mode
 	@$(COMPOSE) stop frontend-dev
 	cd $(PATH_FRONT_IMPRESS) && yarn dev

env.d/development/common.dist

@@ -4,6 +4,12 @@ DJANGO_SECRET_KEY=ThisIsAnExampleKeyForDevPurposeOnly
 DJANGO_SETTINGS_MODULE=impress.settings
 DJANGO_SUPERUSER_PASSWORD=admin
 
+# Logging
+# Set to DEBUG level for dev only
+LOGGING_LEVEL_HANDLERS_CONSOLE=INFO
+LOGGING_LEVEL_LOGGERS_ROOT=INFO
+LOGGING_LEVEL_LOGGERS_APP=INFO
+
 # Python
 PYTHONPATH=/app
 
@@ -21,6 +27,7 @@ STORAGES_STATICFILES_BACKEND=django.contrib.staticfiles.storage.StaticFilesStora
 AWS_S3_ENDPOINT_URL=http://minio:9000
 AWS_S3_ACCESS_KEY_ID=impress
 AWS_S3_SECRET_ACCESS_KEY=password
+MEDIA_BASE_URL=http://localhost:8083
 
 # OIDC
 OIDC_OP_JWKS_ENDPOINT=http://nginx:8083/realms/impress/protocol/openid-connect/certs
@@ -44,3 +51,9 @@ OIDC_AUTH_REQUEST_EXTRA_PARAMS={"acr_values": "eidas1"}
 AI_BASE_URL=https://openaiendpoint.com
 AI_API_KEY=password
 AI_MODEL=llama
+
+# Collaboration
+COLLABORATION_SERVER_URL=ws://localhost:4444
+
+# Frontend
+FRONTEND_THEME=dsfr

src/backend/core/api/permissions.py

@@ -1,9 +1,12 @@
 """Permission handlers for the impress core app."""
 
 from django.core import exceptions
+from django.db.models import Q
 
 from rest_framework import permissions
 
+from core.models import DocumentAccess, RoleChoices
+
 ACTION_FOR_METHOD_TO_PERMISSION = {
     "versions_detail": {"DELETE": "versions_destroy", "GET": "versions_retrieve"}
 }
@@ -59,6 +62,38 @@ class IsOwnedOrPublic(IsAuthenticated):
             return False
 
 
+class CanCreateInvitationPermission(permissions.BasePermission):
+    """
+    Custom permission class to handle permission checks for managing invitations.
+    """
+
+    def has_permission(self, request, view):
+        user = request.user
+
+        # Ensure the user is authenticated
+        if not (bool(request.auth) or request.user.is_authenticated):
+            return False
+
+        # Apply permission checks only for creation (POST requests)
+        if view.action != "create":
+            return True
+
+        # Check if resource_id is passed in the context
+        try:
+            document_id = view.kwargs["resource_id"]
+        except KeyError as exc:
+            raise exceptions.ValidationError(
+                "You must set a document ID in kwargs to manage document invitations."
+            ) from exc
+
+        # Check if the user has access to manage invitations (Owner/Admin roles)
+        return DocumentAccess.objects.filter(
+            Q(user=user) | Q(team__in=user.teams),
+            document=document_id,
+            role__in=[RoleChoices.OWNER, RoleChoices.ADMIN],
+        ).exists()
+
+
 class AccessPermission(permissions.BasePermission):
     """Permission class for access objects."""
 

src/backend/core/api/serializers.py

@@ -328,48 +328,36 @@ class InvitationSerializer(serializers.ModelSerializer):
         return {}
 
     def validate(self, attrs):
-        """Validate and restrict invitation to new user based on email."""
-
+        """Validate invitation data."""
         request = self.context.get("request")
         user = getattr(request, "user", None)
-        role = attrs.get("role")
 
-        try:
-            document_id = self.context["resource_id"]
-        except KeyError as exc:
-            raise exceptions.ValidationError(
-                "You must set a document ID in kwargs to create a new document invitation."
-            ) from exc
+        attrs["document_id"] = self.context["resource_id"]
 
-        if not user and user.is_authenticated:
-            raise exceptions.PermissionDenied(
-                "Anonymous users are not allowed to create invitations."
-            )
+        # Only set the issuer if the instance is being created
+        if self.instance is None:
+            attrs["issuer"] = user
 
-        if not models.DocumentAccess.objects.filter(
-            Q(user=user) | Q(team__in=user.teams),
-            document=document_id,
-            role__in=[models.RoleChoices.OWNER, models.RoleChoices.ADMIN],
-        ).exists():
-            raise exceptions.PermissionDenied(
-                "You are not allowed to manage invitations for this document."
-            )
+        return attrs
 
-        if (
-            role == models.RoleChoices.OWNER
-            and not models.DocumentAccess.objects.filter(
+    def validate_role(self, role):
+        """Custom validation for the role field."""
+        request = self.context.get("request")
+        user = getattr(request, "user", None)
+        document_id = self.context["resource_id"]
+
+        # If the role is OWNER, check if the user has OWNER access
+        if role == models.RoleChoices.OWNER:
+            if not models.DocumentAccess.objects.filter(
                 Q(user=user) | Q(team__in=user.teams),
                 document=document_id,
                 role=models.RoleChoices.OWNER,
-            ).exists()
-        ):
-            raise exceptions.PermissionDenied(
-                "Only owners of a document can invite other users as owners."
-            )
+            ).exists():
+                raise serializers.ValidationError(
+                    "Only owners of a document can invite other users as owners."
+                )
 
-        attrs["document_id"] = document_id
-        attrs["issuer"] = user
-        return attrs
+        return role
 
 
 class VersionFilterSerializer(serializers.Serializer):

src/backend/core/api/viewsets.py

@@ -6,6 +6,7 @@ from urllib.parse import urlparse
 
 from django.conf import settings
 from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.search import TrigramSimilarity
 from django.core.exceptions import ValidationError
 from django.core.files.storage import default_storage
 from django.db.models import (
@@ -25,11 +26,13 @@ from rest_framework import (
     mixins,
     pagination,
     status,
+    views,
     viewsets,
 )
 from rest_framework import (
     response as drf_response,
 )
+from rest_framework.permissions import AllowAny
 
 from core import enums, models
 from core.services.ai_services import AIService
@@ -156,8 +159,21 @@ class UserViewSet(
 
             # Filter users by email similarity
             if query := self.request.GET.get("q", ""):
+                # For performance reasons we filter first by similarity, which relies on an index,
+                # then only calculate precise similarity scores for sorting purposes
                 queryset = queryset.filter(email__trigram_word_similar=query)
 
+                queryset = queryset.annotate(
+                    similarity=TrigramSimilarity("email", query)
+                )
+                # When the query only is on the name part, we should try to make many proposals
+                # But when the query looks like an email we should only propose serious matches
+                threshold = 0.6 if "@" in query else 0.1
+
+                queryset = queryset.filter(similarity__gt=threshold).order_by(
+                    "-similarity"
+                )
+
         return queryset
 
     @decorators.action(
@@ -807,7 +823,10 @@ class InvitationViewset(
 
     lookup_field = "id"
     pagination_class = Pagination
-    permission_classes = [permissions.IsAuthenticated, permissions.AccessPermission]
+    permission_classes = [
+        permissions.CanCreateInvitationPermission,
+        permissions.AccessPermission,
+    ]
     queryset = (
         models.Invitation.objects.all()
         .select_related("document")
@@ -842,10 +861,16 @@ class InvitationViewset(
             )
 
             queryset = (
-                # The logged-in user should be part of a document to see its accesses
+                # The logged-in user should be administrator or owner to see its accesses
                 queryset.filter(
-                    Q(document__accesses__user=user)
-                    | Q(document__accesses__team__in=teams),
+                    Q(
+                        document__accesses__user=user,
+                        document__accesses__role__in=models.PRIVILEGED_ROLES,
+                    )
+                    | Q(
+                        document__accesses__team__in=teams,
+                        document__accesses__role__in=models.PRIVILEGED_ROLES,
+                    ),
                 )
                 # Abilities are computed based on logged-in user's role and
                 # the user role on each document access
@@ -863,3 +888,31 @@ class InvitationViewset(
         invitation.document.email_invitation(
             language, invitation.email, invitation.role, self.request.user
         )
+
+
+class ConfigView(views.APIView):
+    """API ViewSet for sharing some public settings."""
+
+    permission_classes = [AllowAny]
+
+    def get(self, request):
+        """
+        GET /api/v1.0/config/
+            Return a dictionary of public settings.
+        """
+        array_settings = [
+            "COLLABORATION_SERVER_URL",
+            "CRISP_WEBSITE_ID",
+            "ENVIRONMENT",
+            "FRONTEND_THEME",
+            "MEDIA_BASE_URL",
+            "LANGUAGES",
+            "LANGUAGE_CODE",
+            "SENTRY_DSN",
+        ]
+        dict_settings = {}
+        for setting in array_settings:
+            if hasattr(settings, setting):
+                dict_settings[setting] = getattr(settings, setting)
+
+        return drf_response.Response(dict_settings)

src/backend/core/authentication/backends.py

@@ -84,6 +84,8 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
         user = self.get_existing_user(sub, email)
 
         if user:
+            if not user.is_active:
+                raise SuspiciousOperation(_("User account is disabled"))
             self.update_user_if_needed(user, claims)
         elif self.get_settings("OIDC_CREATE_USER", True):
             user = User.objects.create(sub=sub, password="!", **claims)  # noqa: S106
@@ -101,11 +103,11 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
     def get_existing_user(self, sub, email):
         """Fetch existing user by sub or email."""
         try:
-            return User.objects.get(sub=sub, is_active=True)
+            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, is_active=True)
+                    return User.objects.get(email=email)
                 except User.DoesNotExist:
                     pass
         return None

src/backend/core/migrations/0008_alter_document_link_reach.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.2 on 2024-10-25 11:41
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0007_fix_users_duplicate'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='document',
+            name='link_reach',
+            field=models.CharField(choices=[('restricted', 'Restricted'), ('authenticated', 'Authenticated'), ('public', 'Public')], default='restricted', max_length=20),
+        ),
+    ]

src/backend/core/models.py

@@ -72,6 +72,9 @@ class RoleChoices(models.TextChoices):
     OWNER = "owner", _("Owner")
 
 
+PRIVILEGED_ROLES = [RoleChoices.ADMIN, RoleChoices.OWNER]
+
+
 class LinkReachChoices(models.TextChoices):
     """Defines types of access for links"""
 
@@ -127,17 +130,17 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
     """User model to work with OIDC only authentication."""
 
     sub_validator = validators.RegexValidator(
-        regex=r"^[\w.@+-]+\Z",
+        regex=r"^[\w.@+-:]+\Z",
         message=_(
             "Enter a valid sub. This value may contain only letters, "
-            "numbers, and @/./+/-/_ characters."
+            "numbers, and @/./+/-/_/: characters."
         ),
     )
 
     sub = models.CharField(
         _("sub"),
         help_text=_(
-            "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_ characters only."
+            "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_/: characters only."
         ),
         max_length=255,
         unique=True,
@@ -333,7 +336,7 @@ class Document(BaseModel):
     link_reach = models.CharField(
         max_length=20,
         choices=LinkReachChoices.choices,
-        default=LinkReachChoices.AUTHENTICATED,
+        default=LinkReachChoices.RESTRICTED,
     )
     link_role = models.CharField(
         max_length=20, choices=LinkRoleChoices.choices, default=LinkRoleChoices.READER
@@ -493,7 +496,8 @@ class Document(BaseModel):
         # Compute version roles before adding link roles because we don't
         # want anonymous users to access versions (we wouldn't know from
         # which date to allow them anyway)
-        can_get_versions = bool(roles)
+        # Anonymous users should also not see document accesses
+        has_role = bool(roles)
 
         # Add role provided by the document link
         if self.link_reach == LinkReachChoices.PUBLIC or (
@@ -508,18 +512,20 @@ class Document(BaseModel):
         can_get = bool(roles)
 
         return {
+            "accesses_manage": is_owner_or_admin,
+            "accesses_view": has_role,
             "ai_transform": is_owner_or_admin or is_editor,
             "ai_translate": is_owner_or_admin or is_editor,
             "attachment_upload": is_owner_or_admin or is_editor,
             "destroy": RoleChoices.OWNER in roles,
             "link_configuration": is_owner_or_admin,
-            "manage_accesses": is_owner_or_admin,
+            "invite_owner": RoleChoices.OWNER in roles,
             "partial_update": is_owner_or_admin or is_editor,
             "retrieve": can_get,
             "update": is_owner_or_admin or is_editor,
             "versions_destroy": is_owner_or_admin,
-            "versions_list": can_get_versions,
-            "versions_retrieve": can_get_versions,
+            "versions_list": has_role,
+            "versions_retrieve": has_role,
         }
 
     def email_invitation(self, language, email, role, sender):
@@ -675,7 +681,7 @@ class Template(BaseModel):
         return {
             "destroy": RoleChoices.OWNER in roles,
             "generate_document": can_get,
-            "manage_accesses": is_owner_or_admin,
+            "accesses_manage": is_owner_or_admin,
             "update": is_owner_or_admin or is_editor,
             "partial_update": is_owner_or_admin or is_editor,
             "retrieve": can_get,
@@ -880,8 +886,6 @@ class Invitation(BaseModel):
 
     def get_abilities(self, user):
         """Compute and return abilities for a given user."""
-        can_delete = False
-        can_update = False
         roles = []
 
         if user.is_authenticated:
@@ -896,17 +900,13 @@ class Invitation(BaseModel):
                 except (self._meta.model.DoesNotExist, IndexError):
                     roles = []
 
-            can_delete = bool(
-                set(roles).intersection({RoleChoices.OWNER, RoleChoices.ADMIN})
-            )
-
-            can_update = bool(
-                set(roles).intersection({RoleChoices.OWNER, RoleChoices.ADMIN})
-            )
+        is_admin_or_owner = bool(
+            set(roles).intersection({RoleChoices.OWNER, RoleChoices.ADMIN})
+        )
 
         return {
-            "destroy": can_delete,
-            "update": can_update,
-            "partial_update": can_update,
-            "retrieve": bool(roles),
+            "destroy": is_admin_or_owner,
+            "update": is_admin_or_owner,
+            "partial_update": is_admin_or_owner,
+            "retrieve": is_admin_or_owner,
         }

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

@@ -305,3 +305,63 @@ def test_authentication_get_userinfo_invalid_response():
         match="Invalid response format or token verification failed",
     ):
         oidc_backend.get_userinfo("fake_access_token", None, None)
+
+
+def test_authentication_getter_existing_disabled_user_via_sub(
+    django_assert_num_queries, monkeypatch
+):
+    """
+    If an existing user matches the sub but is disabled,
+    an error should be raised and a user should not be created.
+    """
+
+    klass = OIDCAuthenticationBackend()
+    db_user = UserFactory(is_active=False)
+
+    def get_userinfo_mocked(*args):
+        return {
+            "sub": db_user.sub,
+            "email": db_user.email,
+            "first_name": "John",
+            "last_name": "Doe",
+        }
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    with (
+        django_assert_num_queries(1),
+        pytest.raises(SuspiciousOperation, match="User account is disabled"),
+    ):
+        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
+
+    assert models.User.objects.count() == 1
+
+
+def test_authentication_getter_existing_disabled_user_via_email(
+    django_assert_num_queries, monkeypatch
+):
+    """
+    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.
+    """
+
+    klass = OIDCAuthenticationBackend()
+    db_user = UserFactory(is_active=False)
+
+    def get_userinfo_mocked(*args):
+        return {
+            "sub": "random",
+            "email": db_user.email,
+            "first_name": "John",
+            "last_name": "Doe",
+        }
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    with (
+        django_assert_num_queries(2),
+        pytest.raises(SuspiciousOperation, match="User account is disabled"),
+    ):
+        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
+
+    assert models.User.objects.count() == 1

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

@@ -47,6 +47,7 @@ def test_api_documents_create_authenticated_success():
     assert response.status_code == 201
     document = Document.objects.get()
     assert document.title == "my document"
+    assert document.link_reach == "restricted"
     assert document.accesses.filter(role="owner", user=user).exists()
 
 

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

@@ -21,12 +21,14 @@ def test_api_documents_retrieve_anonymous_public():
     assert response.json() == {
         "id": str(document.id),
         "abilities": {
+            "accesses_manage": False,
+            "accesses_view": False,
             "ai_transform": document.link_role == "editor",
             "ai_translate": document.link_role == "editor",
             "attachment_upload": document.link_role == "editor",
             "destroy": False,
+            "invite_owner": False,
             "link_configuration": False,
-            "manage_accesses": False,
             "partial_update": document.link_role == "editor",
             "retrieve": True,
             "update": document.link_role == "editor",
@@ -77,12 +79,14 @@ def test_api_documents_retrieve_authenticated_unrelated_public_or_authenticated(
     assert response.json() == {
         "id": str(document.id),
         "abilities": {
+            "accesses_manage": False,
+            "accesses_view": False,
             "ai_transform": document.link_role == "editor",
             "ai_translate": document.link_role == "editor",
             "attachment_upload": document.link_role == "editor",
             "link_configuration": False,
             "destroy": False,
-            "manage_accesses": False,
+            "invite_owner": False,
             "partial_update": document.link_role == "editor",
             "retrieve": True,
             "update": document.link_role == "editor",

src/backend/core/tests/templates/test_api_templates_retrieve.py

@@ -22,7 +22,7 @@ def test_api_templates_retrieve_anonymous_public():
         "abilities": {
             "destroy": False,
             "generate_document": True,
-            "manage_accesses": False,
+            "accesses_manage": False,
             "partial_update": False,
             "retrieve": True,
             "update": False,
@@ -68,7 +68,7 @@ def test_api_templates_retrieve_authenticated_unrelated_public():
         "abilities": {
             "destroy": False,
             "generate_document": True,
-            "manage_accesses": False,
+            "accesses_manage": False,
             "partial_update": False,
             "retrieve": True,
             "update": False,

src/backend/core/tests/test_api_config.py

@@ -0,0 +1,45 @@
+"""
+Test config API endpoints in the Impress core app.
+"""
+
+from django.test import override_settings
+
+import pytest
+from rest_framework.status import (
+    HTTP_200_OK,
+)
+from rest_framework.test import APIClient
+
+from core import factories
+
+pytestmark = pytest.mark.django_db
+
+
+@override_settings(
+    COLLABORATION_SERVER_URL="http://testcollab/",
+    CRISP_WEBSITE_ID="123",
+    FRONTEND_THEME="test-theme",
+    MEDIA_BASE_URL="http://testserver/",
+    SENTRY_DSN="https://sentry.test/123",
+)
+@pytest.mark.parametrize("is_authenticated", [False, True])
+def test_api_config(is_authenticated):
+    """Anonymous users should be allowed to get the configuration."""
+    client = APIClient()
+
+    if is_authenticated:
+        user = factories.UserFactory()
+        client.force_login(user)
+
+    response = client.get("/api/v1.0/config/")
+    assert response.status_code == HTTP_200_OK
+    assert response.json() == {
+        "COLLABORATION_SERVER_URL": "http://testcollab/",
+        "CRISP_WEBSITE_ID": "123",
+        "ENVIRONMENT": "test",
+        "FRONTEND_THEME": "test-theme",
+        "LANGUAGES": [["en-us", "English"], ["fr-fr", "French"], ["de-de", "German"]],
+        "LANGUAGE_CODE": "en-us",
+        "MEDIA_BASE_URL": "http://testserver/",
+        "SENTRY_DSN": "https://sentry.test/123",
+    }

src/backend/core/tests/test_api_users.py

@@ -69,6 +69,48 @@ def test_api_users_list_query_email():
     assert user_ids == [str(nicole.id), str(frank.id)]
 
 
+def test_api_users_list_query_email_matching():
+    """While filtering by email, results should be filtered and sorted by similarity"""
+    user = factories.UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    alice = factories.UserFactory(email="alice.johnson@example.gouv.fr")
+    factories.UserFactory(email="jane.smith@example.gouv.fr")
+    michael_wilson = factories.UserFactory(email="michael.wilson@example.gouv.fr")
+    factories.UserFactory(email="david.jones@example.gouv.fr")
+    michael_brown = factories.UserFactory(email="michael.brown@example.gouv.fr")
+    factories.UserFactory(email="sophia.taylor@example.gouv.fr")
+
+    response = client.get(
+        "/api/v1.0/users/?q=michael.johnson@example.gouv.f",
+    )
+    assert response.status_code == 200
+    user_ids = [user["id"] for user in response.json()["results"]]
+    assert user_ids == [str(michael_wilson.id)]
+
+    response = client.get("/api/v1.0/users/?q=michael.johnson@example.gouv.fr")
+
+    assert response.status_code == 200
+    user_ids = [user["id"] for user in response.json()["results"]]
+    assert user_ids == [str(michael_wilson.id), str(alice.id), str(michael_brown.id)]
+
+    response = client.get(
+        "/api/v1.0/users/?q=ajohnson@example.gouv.f",
+    )
+    assert response.status_code == 200
+    user_ids = [user["id"] for user in response.json()["results"]]
+    assert user_ids == [str(alice.id)]
+
+    response = client.get(
+        "/api/v1.0/users/?q=michael.wilson@example.gouv.f",
+    )
+    assert response.status_code == 200
+    user_ids = [user["id"] for user in response.json()["results"]]
+    assert user_ids == [str(michael_wilson.id)]
+
+
 def test_api_users_list_query_email_exclude_doc_user():
     """
     Authenticated users should be able to list users

src/backend/core/tests/test_models_documents.py

@@ -83,12 +83,14 @@ def test_models_documents_get_abilities_forbidden(is_authenticated, reach, role)
     user = factories.UserFactory() if is_authenticated else AnonymousUser()
     abilities = document.get_abilities(user)
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": False,
         "ai_transform": False,
         "ai_translate": False,
         "attachment_upload": False,
         "link_configuration": False,
         "destroy": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": False,
         "retrieve": False,
         "update": False,
@@ -115,12 +117,14 @@ def test_models_documents_get_abilities_reader(is_authenticated, reach):
     user = factories.UserFactory() if is_authenticated else AnonymousUser()
     abilities = document.get_abilities(user)
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": False,
         "ai_transform": False,
         "ai_translate": False,
         "attachment_upload": False,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": False,
         "retrieve": True,
         "update": False,
@@ -147,12 +151,14 @@ def test_models_documents_get_abilities_editor(is_authenticated, reach):
     user = factories.UserFactory() if is_authenticated else AnonymousUser()
     abilities = document.get_abilities(user)
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": False,
         "ai_transform": True,
         "ai_translate": True,
         "attachment_upload": True,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": True,
         "retrieve": True,
         "update": True,
@@ -168,12 +174,14 @@ def test_models_documents_get_abilities_owner():
     access = factories.UserDocumentAccessFactory(role="owner", user=user)
     abilities = access.document.get_abilities(access.user)
     assert abilities == {
+        "accesses_manage": True,
+        "accesses_view": True,
         "ai_transform": True,
         "ai_translate": True,
         "attachment_upload": True,
         "destroy": True,
         "link_configuration": True,
-        "manage_accesses": True,
+        "invite_owner": True,
         "partial_update": True,
         "retrieve": True,
         "update": True,
@@ -188,12 +196,14 @@ def test_models_documents_get_abilities_administrator():
     access = factories.UserDocumentAccessFactory(role="administrator")
     abilities = access.document.get_abilities(access.user)
     assert abilities == {
+        "accesses_manage": True,
+        "accesses_view": True,
         "ai_transform": True,
         "ai_translate": True,
         "attachment_upload": True,
         "destroy": False,
         "link_configuration": True,
-        "manage_accesses": True,
+        "invite_owner": False,
         "partial_update": True,
         "retrieve": True,
         "update": True,
@@ -211,12 +221,14 @@ def test_models_documents_get_abilities_editor_user(django_assert_num_queries):
         abilities = access.document.get_abilities(access.user)
 
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": True,
         "ai_transform": True,
         "ai_translate": True,
         "attachment_upload": True,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": True,
         "retrieve": True,
         "update": True,
@@ -236,12 +248,14 @@ def test_models_documents_get_abilities_reader_user(django_assert_num_queries):
         abilities = access.document.get_abilities(access.user)
 
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": True,
         "ai_transform": False,
         "ai_translate": False,
         "attachment_upload": False,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": False,
         "retrieve": True,
         "update": False,
@@ -262,12 +276,14 @@ def test_models_documents_get_abilities_preset_role(django_assert_num_queries):
         abilities = access.document.get_abilities(access.user)
 
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": True,
         "ai_transform": False,
         "ai_translate": False,
         "attachment_upload": False,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": False,
         "retrieve": True,
         "update": False,

src/backend/core/tests/test_models_invitations.py

@@ -2,10 +2,12 @@
 Unit tests for the Invitation model
 """
 
-import time
+from datetime import timedelta
+from unittest import mock
 
 from django.contrib.auth.models import AnonymousUser
 from django.core import exceptions
+from django.utils import timezone
 
 import pytest
 from faker import Faker
@@ -60,7 +62,7 @@ def test_models_invitations_role_among_choices():
         factories.InvitationFactory(role="boss")
 
 
-def test_models_invitations__is_expired(settings):
+def test_models_invitations_is_expired():
     """
     The 'is_expired' property should return False until validity duration
     is exceeded and True afterwards.
@@ -68,13 +70,16 @@ def test_models_invitations__is_expired(settings):
     expired_invitation = factories.InvitationFactory()
     assert expired_invitation.is_expired is False
 
-    settings.INVITATION_VALIDITY_DURATION = 1
-    time.sleep(1)
+    not_late = timezone.now() + timedelta(seconds=604799)
+    with mock.patch("django.utils.timezone.now", return_value=not_late):
+        assert expired_invitation.is_expired is False
 
-    assert expired_invitation.is_expired is True
+    too_late = timezone.now() + timedelta(seconds=604800)  # 7 days
+    with mock.patch("django.utils.timezone.now", return_value=too_late):
+        assert expired_invitation.is_expired is True
 
 
-def test_models_invitation__new_user__convert_invitations_to_accesses():
+def test_models_invitationd_new_userd_convert_invitations_to_accesses():
     """
     Upon creating a new user, invitations linked to the email
     should be converted to accesses and then deleted.
@@ -109,7 +114,7 @@ def test_models_invitation__new_user__convert_invitations_to_accesses():
     ).exists()  # the other invitation remains
 
 
-def test_models_invitation__new_user__filter_expired_invitations():
+def test_models_invitationd_new_user_filter_expired_invitations():
     """
     Upon creating a new identity, valid invitations should be converted into accesses
     and expired invitations should remain unchanged.
@@ -140,7 +145,7 @@ def test_models_invitation__new_user__filter_expired_invitations():
 
 
 @pytest.mark.parametrize("num_invitations, num_queries", [(0, 3), (1, 6), (20, 6)])
-def test_models_invitation__new_user__user_creation_constant_num_queries(
+def test_models_invitationd_new_userd_user_creation_constant_num_queries(
     django_assert_num_queries, num_invitations, num_queries
 ):
     """
@@ -235,7 +240,7 @@ def test_models_document_invitations_get_abilities_reader(via, mock_user_teams):
 
     assert abilities == {
         "destroy": False,
-        "retrieve": True,
+        "retrieve": False,
         "partial_update": False,
         "update": False,
     }
@@ -260,7 +265,7 @@ def test_models_document_invitations_get_abilities_editor(via, mock_user_teams):
 
     assert abilities == {
         "destroy": False,
-        "retrieve": True,
+        "retrieve": False,
         "partial_update": False,
         "update": False,
     }

src/backend/core/tests/test_models_templates.py

@@ -62,7 +62,7 @@ def test_models_templates_get_abilities_anonymous_public():
         "destroy": False,
         "retrieve": True,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": True,
     }
@@ -76,7 +76,7 @@ def test_models_templates_get_abilities_anonymous_not_public():
         "destroy": False,
         "retrieve": False,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": False,
     }
@@ -90,7 +90,7 @@ def test_models_templates_get_abilities_authenticated_public():
         "destroy": False,
         "retrieve": True,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": True,
     }
@@ -104,7 +104,7 @@ def test_models_templates_get_abilities_authenticated_not_public():
         "destroy": False,
         "retrieve": False,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": False,
     }
@@ -119,7 +119,7 @@ def test_models_templates_get_abilities_owner():
         "destroy": True,
         "retrieve": True,
         "update": True,
-        "manage_accesses": True,
+        "accesses_manage": True,
         "partial_update": True,
         "generate_document": True,
     }
@@ -133,7 +133,7 @@ def test_models_templates_get_abilities_administrator():
         "destroy": False,
         "retrieve": True,
         "update": True,
-        "manage_accesses": True,
+        "accesses_manage": True,
         "partial_update": True,
         "generate_document": True,
     }
@@ -150,7 +150,7 @@ def test_models_templates_get_abilities_editor_user(django_assert_num_queries):
         "destroy": False,
         "retrieve": True,
         "update": True,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": True,
         "generate_document": True,
     }
@@ -167,7 +167,7 @@ def test_models_templates_get_abilities_reader_user(django_assert_num_queries):
         "destroy": False,
         "retrieve": True,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": True,
     }
@@ -185,7 +185,7 @@ def test_models_templates_get_abilities_preset_role(django_assert_num_queries):
         "destroy": False,
         "retrieve": True,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": True,
     }

src/backend/core/urls.py

@@ -55,4 +55,5 @@ urlpatterns = [
             ]
         ),
     ),
+    path(f"api/{settings.API_VERSION}/config/", viewsets.ConfigView.as_view()),
 ]

src/backend/impress/settings.py

@@ -10,8 +10,9 @@ For the full list of settings and their values, see
 https://docs.djangoproject.com/en/3.1/ref/settings/
 """
 
-import json
 import os
+import tomllib
+from socket import gethostbyname, gethostname
 
 from django.utils.translation import gettext_lazy as _
 
@@ -27,19 +28,12 @@ DATA_DIR = os.path.join("/", "data")
 def get_release():
     """
     Get the current release of the application
-
-    By release, we mean the release from the version.json file à la Mozilla [1]
-    (if any). If this file has not been found, it defaults to "NA".
-
-    [1]
-    https://github.com/mozilla-services/Dockerflow/blob/master/docs/version_object.md
     """
-    # Try to get the current release from the version.json file generated by the
-    # CI during the Docker image build
     try:
-        with open(os.path.join(BASE_DIR, "version.json"), encoding="utf8") as version:
-            return json.load(version)["version"]
-    except FileNotFoundError:
+        with open(os.path.join(BASE_DIR, "pyproject.toml"), "rb") as f:
+            pyproject_data = tomllib.load(f)
+        return pyproject_data["project"]["version"]
+    except (FileNotFoundError, KeyError):
         return "NA"  # Default: not available
 
 
@@ -56,7 +50,7 @@ class Base(Configuration):
     You may also want to override default configuration by setting the following environment
     variables:
 
-    * DJANGO_SENTRY_DSN
+    * SENTRY_DSN
     * DB_NAME
     * DB_HOST
     * DB_PASSWORD
@@ -104,6 +98,9 @@ class Base(Configuration):
     STATIC_ROOT = os.path.join(DATA_DIR, "static")
     MEDIA_URL = "/media/"
     MEDIA_ROOT = os.path.join(DATA_DIR, "media")
+    MEDIA_BASE_URL = values.Value(
+        None, environ_name="MEDIA_BASE_URL", environ_prefix=None
+    )
 
     SITE_ID = 1
 
@@ -223,6 +220,7 @@ class Base(Configuration):
 
     # Languages
     LANGUAGE_CODE = values.Value("en-us")
+    LANGUAGE_COOKIE_NAME = "docs_language"  # cookie & language is set from frontend
 
     DRF_NESTED_MULTIPART_PARSER = {
         # output of parser is converted to querydict
@@ -236,6 +234,7 @@ class Base(Configuration):
         (
             ("en-us", _("English")),
             ("fr-fr", _("French")),
+            ("de-de", _("German")),
         )
     )
 
@@ -370,7 +369,22 @@ class Base(Configuration):
     CORS_ALLOWED_ORIGIN_REGEXES = values.ListValue([])
 
     # Sentry
-    SENTRY_DSN = values.Value(None, environ_name="SENTRY_DSN")
+    SENTRY_DSN = values.Value(None, environ_name="SENTRY_DSN", environ_prefix=None)
+
+    # Collaboration
+    COLLABORATION_SERVER_URL = values.Value(
+        None, environ_name="COLLABORATION_SERVER_URL", environ_prefix=None
+    )
+
+    # Frontend
+    FRONTEND_THEME = values.Value(
+        None, environ_name="FRONTEND_THEME", environ_prefix=None
+    )
+
+    # Crisp
+    CRISP_WEBSITE_ID = values.Value(
+        None, environ_name="CRISP_WEBSITE_ID", environ_prefix=None
+    )
 
     # Easy thumbnails
     THUMBNAIL_EXTENSION = "webp"
@@ -480,6 +494,42 @@ class Base(Configuration):
         environ_prefix=None,
     )
 
+    # Logging
+    # We want to make it easy to log to console but by default we log production
+    # to Sentry and don't want to log to console.
+    LOGGING = {
+        "version": 1,
+        "disable_existing_loggers": False,
+        "handlers": {
+            "console": {
+                "class": "logging.StreamHandler",
+                "level": values.Value(
+                    "ERROR",
+                    environ_name="LOGGING_LEVEL_HANDLERS_CONSOLE",
+                    environ_prefix=None,
+                ),
+            },
+        },
+        # Override root logger to send it to console
+        "root": {
+            "handlers": ["console"],
+            "level": values.Value(
+                "INFO", environ_name="LOGGING_LEVEL_LOGGERS_ROOT", environ_prefix=None
+            ),
+        },
+        "loggers": {
+            "core": {
+                "handlers": ["console"],
+                "level": values.Value(
+                    "INFO",
+                    environ_name="LOGGING_LEVEL_LOGGERS_APP",
+                    environ_prefix=None,
+                ),
+                "propagate": False,
+            },
+        },
+    }
+
     # pylint: disable=invalid-name
     @property
     def ENVIRONMENT(self):
@@ -575,23 +625,6 @@ class Development(Base):
 class Test(Base):
     """Test environment settings"""
 
-    LOGGING = values.DictValue(
-        {
-            "version": 1,
-            "disable_existing_loggers": False,
-            "handlers": {
-                "console": {
-                    "class": "logging.StreamHandler",
-                },
-            },
-            "loggers": {
-                "impress": {
-                    "handlers": ["console"],
-                    "level": "DEBUG",
-                },
-            },
-        }
-    )
     PASSWORD_HASHERS = [
         "django.contrib.auth.hashers.MD5PasswordHasher",
     ]
@@ -622,7 +655,13 @@ class Production(Base):
     """
 
     # Security
-    ALLOWED_HOSTS = values.ListValue(None)
+    # Add allowed host from environment variables.
+    # The machine hostname is added by default,
+    # it makes the application pingable by a load balancer on the same machine by example
+    ALLOWED_HOSTS = [
+        *values.ListValue([], environ_name="ALLOWED_HOSTS"),
+        gethostbyname(gethostname()),
+    ]
     CSRF_TRUSTED_ORIGINS = values.ListValue([])
     SECURE_BROWSER_XSS_FILTER = True
     SECURE_CONTENT_TYPE_NOSNIFF = True

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

@@ -0,0 +1,349 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: lasuite-people\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2024-09-25 10:15+0000\n"
+"PO-Revision-Date: 2024-09-25 10:21\n"
+"Last-Translator: \n"
+"Language-Team: German\n"
+"Language: de_DE\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+"X-Crowdin-Project: lasuite-people\n"
+"X-Crowdin-Project-ID: 637934\n"
+"X-Crowdin-Language: de\n"
+"X-Crowdin-File: backend-impress.pot\n"
+"X-Crowdin-File-ID: 8\n"
+
+#: core/admin.py:32
+msgid "Personal info"
+msgstr "Persönliche Angaben"
+
+#: core/admin.py:34
+msgid "Permissions"
+msgstr "Berechtigungen"
+
+#: core/admin.py:46
+msgid "Important dates"
+msgstr "Wichtige Termine"
+
+#: core/api/serializers.py:253
+msgid "Body"
+msgstr ""
+
+#: core/api/serializers.py:256
+msgid "Body type"
+msgstr ""
+
+#: core/api/serializers.py:262
+msgid "Format"
+msgstr ""
+
+#: core/authentication/backends.py:56
+msgid "Invalid response format or token verification failed"
+msgstr ""
+
+#: core/authentication/backends.py:81
+msgid "User info contained no recognizable user identification"
+msgstr ""
+
+#: core/authentication/backends.py:101
+msgid "Claims contained no recognizable user identification"
+msgstr ""
+
+#: core/models.py:62 core/models.py:69
+msgid "Reader"
+msgstr "Leser"
+
+#: core/models.py:63 core/models.py:70
+msgid "Editor"
+msgstr "Bearbeiter"
+
+#: core/models.py:71
+msgid "Administrator"
+msgstr "Administrator"
+
+#: core/models.py:72
+msgid "Owner"
+msgstr "Eigentümer"
+
+#: core/models.py:80
+msgid "Restricted"
+msgstr "Eingeschränkt"
+
+#: core/models.py:84
+msgid "Authenticated"
+msgstr "Authentifiziert"
+
+#: core/models.py:86
+msgid "Public"
+msgstr "Öffentlich"
+
+#: core/models.py:98
+msgid "id"
+msgstr ""
+
+#: core/models.py:99
+msgid "primary key for the record as UUID"
+msgstr ""
+
+#: core/models.py:105
+msgid "created on"
+msgstr ""
+
+#: core/models.py:106
+msgid "date and time at which a record was created"
+msgstr ""
+
+#: core/models.py:111
+msgid "updated on"
+msgstr ""
+
+#: core/models.py:112
+msgid "date and time at which a record was last updated"
+msgstr ""
+
+#: core/models.py:132
+msgid "Enter a valid sub. This value may contain only letters, numbers, and @/./+/-/_ characters."
+msgstr ""
+
+#: core/models.py:138
+msgid "sub"
+msgstr ""
+
+#: core/models.py:140
+msgid "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_ characters only."
+msgstr ""
+
+#: core/models.py:148
+msgid "identity email address"
+msgstr ""
+
+#: core/models.py:153
+msgid "admin email address"
+msgstr ""
+
+#: core/models.py:160
+msgid "language"
+msgstr ""
+
+#: core/models.py:161
+msgid "The language in which the user wants to see the interface."
+msgstr ""
+
+#: core/models.py:167
+msgid "The timezone in which the user wants to see times."
+msgstr ""
+
+#: core/models.py:170
+msgid "device"
+msgstr ""
+
+#: core/models.py:172
+msgid "Whether the user is a device or a real user."
+msgstr ""
+
+#: core/models.py:175
+msgid "staff status"
+msgstr ""
+
+#: core/models.py:177
+msgid "Whether the user can log into this admin site."
+msgstr ""
+
+#: core/models.py:180
+msgid "active"
+msgstr ""
+
+#: core/models.py:183
+msgid "Whether this user should be treated as active. Unselect this instead of deleting accounts."
+msgstr ""
+
+#: core/models.py:195
+msgid "user"
+msgstr ""
+
+#: core/models.py:196
+msgid "users"
+msgstr ""
+
+#: core/models.py:328 core/models.py:644
+msgid "title"
+msgstr ""
+
+#: core/models.py:343
+msgid "Document"
+msgstr ""
+
+#: core/models.py:344
+msgid "Documents"
+msgstr ""
+
+#: core/models.py:347
+msgid "Untitled Document"
+msgstr ""
+
+#: core/models.py:537
+#, python-format
+msgid "%(username)s shared a document with you: %(document)s"
+msgstr "%(username)s hat ein Dokument mit Ihnen geteilt: %(document)s"
+
+#: core/models.py:580
+msgid "Document/user link trace"
+msgstr ""
+
+#: core/models.py:581
+msgid "Document/user link traces"
+msgstr ""
+
+#: core/models.py:587
+msgid "A link trace already exists for this document/user."
+msgstr ""
+
+#: core/models.py:608
+msgid "Document/user relation"
+msgstr ""
+
+#: core/models.py:609
+msgid "Document/user relations"
+msgstr ""
+
+#: core/models.py:615
+msgid "This user is already in this document."
+msgstr ""
+
+#: core/models.py:621
+msgid "This team is already in this document."
+msgstr ""
+
+#: core/models.py:627 core/models.py:816
+msgid "Either user or team must be set, not both."
+msgstr ""
+
+#: core/models.py:645
+msgid "description"
+msgstr ""
+
+#: core/models.py:646
+msgid "code"
+msgstr ""
+
+#: core/models.py:647
+msgid "css"
+msgstr ""
+
+#: core/models.py:649
+msgid "public"
+msgstr ""
+
+#: core/models.py:651
+msgid "Whether this template is public for anyone to use."
+msgstr ""
+
+#: core/models.py:657
+msgid "Template"
+msgstr ""
+
+#: core/models.py:658
+msgid "Templates"
+msgstr ""
+
+#: core/models.py:797
+msgid "Template/user relation"
+msgstr ""
+
+#: core/models.py:798
+msgid "Template/user relations"
+msgstr ""
+
+#: core/models.py:804
+msgid "This user is already in this template."
+msgstr ""
+
+#: core/models.py:810
+msgid "This team is already in this template."
+msgstr ""
+
+#: core/models.py:833
+msgid "email address"
+msgstr ""
+
+#: core/models.py:850
+msgid "Document invitation"
+msgstr ""
+
+#: core/models.py:851
+msgid "Document invitations"
+msgstr ""
+
+#: core/models.py:868
+msgid "This email is already associated to a registered user."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:160
+#: core/templates/mail/html/invitation2.html:160
+#: core/templates/mail/text/invitation.txt:3
+#: core/templates/mail/text/invitation2.txt:3
+msgid "La Suite Numérique"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:190
+#: core/templates/mail/text/invitation.txt:6
+#, python-format
+msgid " %(username)s shared a document with you ! "
+msgstr " %(username)s hat ein Dokument mit Ihnen geteilt! "
+
+#: core/templates/mail/html/invitation.html:197
+#: core/templates/mail/text/invitation.txt:8
+#, python-format
+msgid " %(username)s invited you as an %(role)s on the following document : "
+msgstr " %(username)s hat Sie als %(role)s zum folgenden Dokument eingeladen: "
+
+#: core/templates/mail/html/invitation.html:206
+#: core/templates/mail/html/invitation2.html:211
+#: core/templates/mail/text/invitation.txt:10
+#: core/templates/mail/text/invitation2.txt:11
+msgid "Open"
+msgstr "Öffnen"
+
+#: core/templates/mail/html/invitation.html:223
+#: core/templates/mail/text/invitation.txt:14
+msgid " Docs, your new essential tool for organizing, sharing and collaborate on your documents as a team. "
+msgstr " Docs, Ihr neues unverzichtbares Werkzeug zum Organisieren, Teilen und Zusammenarbeiten an Dokumenten im Team. "
+
+#: core/templates/mail/html/invitation.html:230
+#: core/templates/mail/html/invitation2.html:235
+#: core/templates/mail/text/invitation.txt:16
+#: core/templates/mail/text/invitation2.txt:17
+msgid "Brought to you by La Suite Numérique"
+msgstr "Bereitgestellt von La Suite Numérique"
+
+#: core/templates/mail/html/invitation2.html:190
+#, python-format
+msgid "%(username)s shared a document with you"
+msgstr "%(username)s hat ein Dokument mit Ihnen geteilt"
+
+#: core/templates/mail/html/invitation2.html:197
+#: core/templates/mail/text/invitation2.txt:8
+#, python-format
+msgid "%(username)s invited you as an %(role)s on the following document :"
+msgstr "%(username)s hat Sie als %(role)s zum folgenden Dokument eingeladen:"
+
+#: core/templates/mail/html/invitation2.html:228
+#: core/templates/mail/text/invitation2.txt:15
+msgid "Docs, your new essential tool for organizing, sharing and collaborate on your document as a team."
+msgstr "Docs, Ihr neues unverzichtbares Werkzeug zum Organisieren, Teilen und gemeinsamen Arbeiten an Dokumenten im Team."
+
+#: impress/settings.py:177
+msgid "English"
+msgstr ""
+
+#: impress/settings.py:178
+msgid "French"
+msgstr ""
+
+#: impress/settings.py:176
+msgid "German"
+msgstr ""

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

@@ -345,11 +345,14 @@ msgstr ""
 msgid "This mail has been sent to %(email)s by %(name)s [%(href)s]"
 msgstr ""
 
-#: impress/settings.py:176
+#: impress/settings.py:177
 msgid "English"
 msgstr ""
 
-#: impress/settings.py:177
+#: impress/settings.py:178
 msgid "French"
 msgstr ""
 
+#: impress/settings.py:176
+msgid "German"
+msgstr ""

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

@@ -345,11 +345,14 @@ msgstr "Proposé par La Suite Numérique"
 msgid "This mail has been sent to %(email)s by %(name)s [%(href)s]"
 msgstr ""
 
-#: impress/settings.py:176
+#: impress/settings.py:177
 msgid "English"
 msgstr ""
 
-#: impress/settings.py:177
+#: impress/settings.py:178
 msgid "French"
 msgstr ""
 
+#: impress/settings.py:176
+msgid "German"
+msgstr ""

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "impress"
-version = "1.5.1"
+version = "1.8.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -17,15 +17,15 @@ classifiers = [
     "License :: OSI Approved :: MIT License",
     "Natural Language :: English",
     "Programming Language :: Python :: 3",
-    "Programming Language :: Python :: 3.10",
+    "Programming Language :: Python :: 3.12",
 ]
 description = "An application to print markdown to pdf from a set of managed templates."
 keywords = ["Django", "Contacts", "Templates", "RBAC"]
 license = { file = "LICENSE" }
 readme = "README.md"
-requires-python = ">=3.10"
+requires-python = ">=3.12"
 dependencies = [
-    "boto3==1.35.41",
+    "boto3==1.35.44",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
@@ -46,14 +46,14 @@ dependencies = [
     "jsonschema==4.23.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "openai==1.44.1",
+    "openai==1.52.0",
     "psycopg[binary]==3.2.3",
     "PyJWT==2.9.0",
     "pypandoc==1.14",
     "python-frontmatter==1.1.0",
     "python-magic==0.4.27",
     "requests==2.32.3",
-    "sentry-sdk==2.16.0",
+    "sentry-sdk==2.17.0",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.7.0",
@@ -82,7 +82,7 @@ dev = [
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.6.9",
+    "ruff==0.7.0",
     "types-requests==2.32.0.20241016",
 ]
 
@@ -127,6 +127,7 @@ select = [
 [tool.ruff.lint.isort]
 section-order = ["future","standard-library","django","third-party","impress","first-party","local-folder"]
 sections = { impress=["core"], django=["django"] }
+extra-standard-library = ["tomllib"]
 
 [tool.ruff.lint.per-file-ignores]
 "**/tests/*" = ["S", "SLF"]

src/frontend/Dockerfile

@@ -61,18 +61,9 @@ FROM impress AS impress-builder
 
 WORKDIR /home/frontend/apps/impress
 
-ARG FRONTEND_THEME
-ENV NEXT_PUBLIC_THEME=${FRONTEND_THEME}
-
-ARG Y_PROVIDER_URL
-ENV NEXT_PUBLIC_Y_PROVIDER_URL=${Y_PROVIDER_URL}
-
 ARG API_ORIGIN
 ENV NEXT_PUBLIC_API_ORIGIN=${API_ORIGIN}
 
-ARG MEDIA_URL
-ENV NEXT_PUBLIC_MEDIA_URL=${MEDIA_URL}
-
 ARG SW_DEACTIVATED
 ENV NEXT_PUBLIC_SW_DEACTIVATED=${SW_DEACTIVATED}
 

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

@@ -4,17 +4,17 @@ export const keyCloakSignIn = async (page: Page, browserName: string) => {
   const login = `user-e2e-${browserName}`;
   const password = `password-e2e-${browserName}`;
 
+  await expect(
+    page.locator('.login-pf-page-header').getByText('impress'),
+  ).toBeVisible();
+
   if (await page.getByLabel('Restart login').isVisible()) {
-    await page.getByRole('textbox', { name: 'password' }).fill(password);
-
-    await page.click('input[type="submit"]', { force: true });
-  } else {
-    await page.getByRole('textbox', { name: 'username' }).fill(login);
-
-    await page.getByRole('textbox', { name: 'password' }).fill(password);
-
-    await page.click('input[type="submit"]', { force: true });
+    await page.getByLabel('Restart login').click();
   }
+
+  await page.getByRole('textbox', { name: 'username' }).fill(login);
+  await page.getByRole('textbox', { name: 'password' }).fill(password);
+  await page.click('input[type="submit"]', { force: true });
 };
 
 export const randomName = (name: string, browserName: string, length: number) =>
@@ -27,7 +27,6 @@ export const createDoc = async (
   docName: string,
   browserName: string,
   length: number,
-  isPublic: boolean = false,
 ) => {
   const randomDocs = randomName(docName, browserName, length);
 
@@ -37,34 +36,25 @@ export const createDoc = async (
 
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
-    await page.getByRole('heading', { name: 'Untitled document' }).click();
-    await page.keyboard.type(randomDocs[i]);
-    await page.getByText('Created at ').click();
-
-    if (isPublic) {
-      await page.getByRole('button', { name: 'Share' }).click();
-      await page.getByText('Doc private').click();
-
-      await page.locator('.c__modal__backdrop').click({
-        position: { x: 0, y: 0 },
-        force: true,
-      });
-
-      await expect(
-        page
-          .getByLabel('It is the card information about the document.')
-          .getByText('Public'),
-      ).toBeVisible();
-    }
+    const input = page.getByRole('textbox', { name: 'doc title input' });
+    await input.click();
+    await input.fill(randomDocs[i]);
+    await input.blur();
   }
 
   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,
@@ -77,7 +67,9 @@ export const addNewMember = async (
       response.status() === 200,
   );
 
-  const inputSearch = page.getByLabel(/Find a member to add to the document/);
+  const inputSearch = page.getByRole('combobox', {
+    name: 'Find a member to add to the document',
+  });
 
   // Select a new user
   await inputSearch.fill(fillText);
@@ -89,17 +81,19 @@ export const addNewMember = async (
   }[];
 
   // Choose user
-  await page.getByRole('option', { name: users[index].email }).click();
+  await page.getByTestId(`search-user-row-${users[index].email}`).click();
 
   // Choose a role
-  await page.getByRole('combobox', { name: /Choose a role/ }).click();
+  const container = page.getByTestId('doc-share-add-member-list');
+  await container.getByLabel('doc-role-dropdown').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();
+  await page.getByRole('button', { name: 'Invite' }).click();
 
+  const list = page.getByTestId('doc-share-quick-search');
+  const newUser = list.getByTestId(
+    `doc-share-member-row-${users[index].email}`,
+  );
+  await expect(newUser).toBeVisible();
   return users[index].email;
 };
 
@@ -114,24 +108,22 @@ export const goToGridDoc = async (
   const header = page.locator('header').first();
   await header.locator('h2').getByText('Docs').click();
 
-  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('docs-grid-loader')).toBeHidden();
 
-  await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-    timeout: 10000,
-  });
-
-  const rows = datagridTable.getByRole('row');
+  const rows = docsGrid.getByRole('row');
+  expect(await rows.count()).toEqual(20);
   const row = title
     ? rows.filter({
         hasText: title,
       })
     : rows.nth(nthRow);
 
-  const docTitleCell = row.getByRole('cell').nth(1);
-
-  const docTitle = await docTitleCell.textContent();
+  await expect(row).toBeVisible();
 
+  const docTitleContent = row.locator('[aria-describedby="doc-title"]').first();
+  const docTitle = await docTitleContent.textContent();
   expect(docTitle).toBeDefined();
 
   await row.getByRole('link').first().click();
@@ -161,7 +153,7 @@ export const mockedDocument = async (page: Page, json: object) => {
             versions_destroy: false,
             versions_list: true,
             versions_retrieve: true,
-            manage_accesses: false, // Means not admin
+            accesses_manage: false, // Means not admin
             update: false,
             partial_update: false, // Means not editor
             retrieve: true,

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

@@ -0,0 +1,161 @@
+import path from 'path';
+
+import { expect, test } from '@playwright/test';
+
+import { createDoc, verifyDocName } from './common';
+
+const config = {
+  CRISP_WEBSITE_ID: null,
+  COLLABORATION_SERVER_URL: 'ws://localhost:4444',
+  ENVIRONMENT: 'development',
+  FRONTEND_THEME: 'dsfr',
+  MEDIA_BASE_URL: 'http://localhost:8083',
+  LANGUAGES: [
+    ['en-us', 'English'],
+    ['fr-fr', 'French'],
+    ['de-de', 'German'],
+  ],
+  LANGUAGE_CODE: 'en-us',
+  SENTRY_DSN: null,
+};
+
+test.describe('Config', () => {
+  test('it checks the config api is called', async ({ page }) => {
+    const responsePromise = page.waitForResponse(
+      (response) =>
+        response.url().includes('/config/') && response.status() === 200,
+    );
+
+    await page.goto('/');
+
+    const response = await responsePromise;
+    expect(response.ok()).toBeTruthy();
+
+    expect(await response.json()).toStrictEqual(config);
+  });
+
+  test('it checks that sentry is trying to init from config endpoint', async ({
+    page,
+  }) => {
+    await page.route('**/api/v1.0/config/', async (route) => {
+      const request = route.request();
+      if (request.method().includes('GET')) {
+        await route.fulfill({
+          json: {
+            ...config,
+            SENTRY_DSN: 'https://sentry.io/123',
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    const invalidMsg = 'Invalid Sentry Dsn: https://sentry.io/123';
+    const consoleMessage = page.waitForEvent('console', {
+      timeout: 5000,
+      predicate: (msg) => msg.text().includes(invalidMsg),
+    });
+
+    await page.goto('/');
+
+    expect((await consoleMessage).text()).toContain(invalidMsg);
+  });
+
+  test('it checks that theme is configured from config endpoint', async ({
+    page,
+  }) => {
+    const responsePromise = page.waitForResponse(
+      (response) =>
+        response.url().includes('/config/') && response.status() === 200,
+    );
+
+    await page.goto('/');
+
+    const response = await responsePromise;
+    expect(response.ok()).toBeTruthy();
+
+    const jsonResponse = await response.json();
+    expect(jsonResponse.FRONTEND_THEME).toStrictEqual('dsfr');
+
+    const footer = page.locator('footer').first();
+    // alt 'Gouvernement Logo' comes from the theme
+    await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
+  });
+
+  test('it checks that media server is configured from config endpoint', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+
+    await createDoc(page, 'doc-media', browserName, 1);
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Resizable image with caption').click();
+    await page.getByText('Upload image').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(
+      path.join(__dirname, 'assets/logo-suite-numerique.png'),
+    );
+
+    const image = page.getByRole('img', { name: 'logo-suite-numerique.png' });
+
+    await expect(image).toBeVisible();
+
+    // Check src of image
+    expect(await image.getAttribute('src')).toMatch(
+      /http:\/\/localhost:8083\/media\/.*\/attachments\/.*.png/,
+    );
+  });
+
+  test('it checks that collaboration server is configured from config endpoint', async ({
+    page,
+    browserName,
+  }) => {
+    const webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
+      return webSocket.url().includes('ws://localhost:4444/');
+    });
+
+    await page.goto('/');
+
+    const randomDoc = await createDoc(
+      page,
+      'doc-collaboration',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, randomDoc[0]);
+
+    const webSocket = await webSocketPromise;
+    expect(webSocket.url()).toContain('ws://localhost:4444/');
+  });
+
+  test('it checks that Crisp is trying to init from config endpoint', async ({
+    page,
+  }) => {
+    await page.route('**/api/v1.0/config/', async (route) => {
+      const request = route.request();
+      if (request.method().includes('GET')) {
+        await route.fulfill({
+          json: {
+            ...config,
+            CRISP_WEBSITE_ID: '1234',
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await page.goto('/');
+
+    await expect(
+      page.locator('#crisp-chatbox').getByText('Invalid website'),
+    ).toBeVisible();
+  });
+});

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

@@ -18,14 +18,11 @@ test.describe('Doc Create', () => {
     const header = page.locator('header').first();
     await header.locator('h2').getByText('Docs').click();
 
-    const datagrid = page.getByLabel('Datagrid of the documents page 1');
-    const datagridTable = datagrid.getByRole('table');
+    await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
 
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-      timeout: 10000,
-    });
-    await expect(datagridTable.getByText(docTitle)).toBeVisible({
-      timeout: 5000,
-    });
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+    await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
+    await expect(docsGrid.getByText(docTitle)).toBeVisible();
   });
 });

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

@@ -2,13 +2,90 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc, mockedDocument } from './common';
+import {
+  createDoc,
+  goToGridDoc,
+  mockedDocument,
+  verifyDocName,
+} from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
 test.describe('Doc Editor', () => {
+  test('it check translations of the slash menu when changing language', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-toolbar', browserName, 1);
+
+    const header = page.locator('header').first();
+    const editor = page.locator('.ProseMirror');
+    // Trigger slash menu to show english menu
+    await editor.click();
+    await editor.fill('/');
+    await expect(page.getByText('Headings', { exact: true })).toBeVisible();
+    await header.click();
+    await expect(page.getByText('Headings', { exact: true })).toBeHidden();
+
+    // Reset menu
+    await editor.click();
+    await editor.fill('');
+
+    // Change language to French
+    await header.click();
+    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('option', { name: 'Français' }).click();
+    await expect(
+      header.getByRole('combobox').getByText('Français'),
+    ).toBeVisible();
+
+    // Trigger slash menu to show french menu
+    await editor.click();
+    await editor.fill('/');
+    await expect(page.getByText('Titres', { exact: true })).toBeVisible();
+    await header.click();
+    await expect(page.getByText('Titres', { exact: true })).toBeHidden();
+  });
+
+  test('it checks default toolbar buttons are displayed', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-toolbar', browserName, 1);
+
+    const editor = page.locator('.ProseMirror');
+    await editor.click();
+    await editor.fill('test content');
+
+    await editor.getByText('test content').dblclick();
+
+    const toolbar = page.locator('.bn-formatting-toolbar');
+    await expect(toolbar.locator('button[data-test="bold"]')).toBeVisible();
+    await expect(toolbar.locator('button[data-test="italic"]')).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="underline"]'),
+    ).toBeVisible();
+    await expect(toolbar.locator('button[data-test="strike"]')).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="alignTextLeft"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="alignTextCenter"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="alignTextRight"]'),
+    ).toBeVisible();
+    await expect(toolbar.locator('button[data-test="colors"]')).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="unnestBlock"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="createLink"]'),
+    ).toBeVisible();
+  });
+
   test('checks the Doc is connected to the provider server', async ({
     page,
     browserName,
@@ -18,7 +95,7 @@ test.describe('Doc Editor', () => {
     });
 
     const randomDoc = await createDoc(page, 'doc-editor', browserName, 1);
-    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
+    await verifyDocName(page, randomDoc[0]);
 
     const webSocket = await webSocketPromise;
     expect(webSocket.url()).toContain('ws://localhost:4444/');
@@ -38,7 +115,7 @@ test.describe('Doc Editor', () => {
   }) => {
     const randomDoc = await createDoc(page, 'doc-markdown', browserName, 1);
 
-    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
+    await verifyDocName(page, randomDoc[0]);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -59,10 +136,11 @@ test.describe('Doc Editor', () => {
 
   test('it renders correctly when we switch from one doc to another', async ({
     page,
+    browserName,
   }) => {
     // Check the first doc
-    const firstDoc = await goToGridDoc(page);
-    await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
+    const [firstDoc] = await createDoc(page, 'doc-switch-1', browserName, 1);
+    await verifyDocName(page, firstDoc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -70,10 +148,9 @@ test.describe('Doc Editor', () => {
     await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
 
     // Check the second doc
-    const secondDoc = await goToGridDoc(page, {
-      nthRow: 2,
-    });
-    await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
+    const [secondDoc] = await createDoc(page, 'doc-switch-2', browserName, 1);
+    await verifyDocName(page, secondDoc);
+
     await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
     await editor.click();
     await editor.fill('Hello World Doc 2');
@@ -83,15 +160,18 @@ test.describe('Doc Editor', () => {
     await goToGridDoc(page, {
       title: firstDoc,
     });
-    await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
+    await verifyDocName(page, firstDoc);
     await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
     await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
   });
 
-  test('it saves the doc when we change pages', async ({ page }) => {
+  test('it saves the doc when we change pages', async ({
+    page,
+    browserName,
+  }) => {
     // Check the first doc
-    const doc = await goToGridDoc(page);
-    await expect(page.locator('h2').getByText(doc)).toBeVisible();
+    const [doc] = await createDoc(page, 'doc-saves-change', browserName, 1);
+    await verifyDocName(page, doc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -102,7 +182,7 @@ test.describe('Doc Editor', () => {
       nthRow: 2,
     });
 
-    await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
+    await verifyDocName(page, secondDoc);
 
     await goToGridDoc(page, {
       title: doc,
@@ -117,7 +197,8 @@ test.describe('Doc Editor', () => {
 
     // Check the first doc
     const doc = await goToGridDoc(page);
-    await expect(page.locator('h2').getByText(doc)).toBeVisible();
+
+    await verifyDocName(page, doc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -141,7 +222,7 @@ test.describe('Doc Editor', () => {
         versions_destroy: false,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: false, // Means not admin
+        accesses_manage: false, // Means not admin
         update: false,
         partial_update: false, // Means not editor
         retrieve: true,

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

@@ -3,13 +3,44 @@ import cs from 'convert-stream';
 import jsdom from 'jsdom';
 import pdf from 'pdf-parse';
 
-import { createDoc } from './common';
+import { createDoc, verifyDocName } 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,
@@ -20,15 +51,14 @@ test.describe('Doc Export', () => {
       return download.suggestedFilename().includes(`${randomDoc}.pdf`);
     });
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     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: 'Export',
+        name: 'download',
       })
       .click();
 
@@ -57,19 +87,19 @@ test.describe('Doc Export', () => {
       return download.suggestedFilename().includes(`${randomDoc}.docx`);
     });
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     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: 'Export',
+        name: 'download',
       })
       .click();
 
-    await page.getByText('Docx').click();
+    await page.getByRole('combobox', { name: 'Format' }).click();
+    await page.getByRole('option', { name: 'Word / Open Office' }).click();
 
     await page
       .getByRole('button', {
@@ -97,7 +127,7 @@ test.describe('Doc Export', () => {
       await route.continue();
     });
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.locator('.bn-block-outer').last().fill('Hello World');
     await page.locator('.bn-block-outer').last().click();
@@ -190,10 +220,9 @@ test.describe('Doc Export', () => {
       .click();
 
     // Download
-    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'Export',
+        name: 'download',
       })
       .click();
 

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

@@ -1,264 +1,14 @@
 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 } });
 
@@ -303,7 +53,7 @@ test.describe('Documents Grid mobile', () => {
                   attachment_upload: true,
                   destroy: true,
                   link_configuration: true,
-                  manage_accesses: true,
+                  accesses_manage: true,
                   partial_update: true,
                   retrieve: true,
                   update: true,
@@ -326,19 +76,183 @@ test.describe('Documents Grid mobile', () => {
 
     await page.goto('/');
 
-    const datagrid = page.getByLabel('Datagrid of the documents page 1');
-    const tableDatagrid = datagrid.getByRole('table');
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+    await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
 
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-      timeout: 10000,
-    });
-
-    const rows = tableDatagrid.getByRole('row');
+    const rows = docsGrid.getByRole('row');
     const row = rows.filter({
       hasText: 'My mocked document',
     });
 
-    await expect(row.getByRole('cell').nth(0)).toHaveText('My mocked document');
-    await expect(row.getByRole('cell').nth(1)).toHaveText('Public');
+    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().includes('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.locator('h2').getByText(`Deleting the document "${docs[0].title}"`),
+    ).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Confirm deletion',
+      })
+      .click();
+
+    const refetchResponse = await page.waitForResponse(
+      (response) =>
+        response.url().includes('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 Grid', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('checks all the elements are visible', async ({ page }) => {
+    let docs: SmallDoc[] = [];
+    await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
+
+    const response = await page.waitForResponse(
+      (response) =>
+        response.url().includes('documents/?page=1') &&
+        response.status() === 200,
+    );
+    const result = await response.json();
+    docs = result.results as SmallDoc[];
+
+    await expect(page.getByTestId('docs-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().includes(`/documents/?page=1`) &&
+        response.status() === 200,
+    );
+
+    const responsePromisePage2 = page.waitForResponse(
+      (response) =>
+        response.url().includes(`/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();
+      }),
+    );
   });
 });

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

@@ -6,6 +6,7 @@ import {
   mockedAccesses,
   mockedDocument,
   mockedInvitations,
+  verifyDocName,
 } from './common';
 
 test.beforeEach(async ({ page }) => {
@@ -21,6 +22,7 @@ test.describe('Doc Header', () => {
           role: 'owner',
           user: {
             email: 'super@owner.com',
+            full_name: 'Super Owner',
           },
         },
         {
@@ -44,7 +46,7 @@ test.describe('Doc Header', () => {
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: true,
+        accesses_manage: true,
         update: true,
         partial_update: true,
         retrieve: true,
@@ -58,88 +60,35 @@ test.describe('Doc Header', () => {
     const card = page.getByLabel(
       'It is the card information about the document.',
     );
-    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(
-      card.getByText('Created at 09/01/2021, 11:00 AM'),
-    ).toBeVisible();
-    await expect(
-      card.getByText('Owners: super@owner.com / super2@owner.com'),
-    ).toBeVisible();
-    await expect(card.getByText('Your role: Owner')).toBeVisible();
+
+    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(
+      page.getByRole('button', { name: 'Open the document options' }),
+    ).toBeVisible();
   });
 
   test('it updates the title doc', async ({ page, browserName }) => {
-    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('');
-
-    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();
+    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');
   });
 
   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
-      .getByRole('button', {
+      .getByRole('option', {
         name: 'Delete document',
       })
       .click();
@@ -158,9 +107,7 @@ test.describe('Doc Header', () => {
       page.getByText('The document has been deleted.'),
     ).toBeVisible();
 
-    await expect(
-      page.getByRole('button', { name: 'Create a new document' }),
-    ).toBeVisible();
+    await expect(page.getByRole('button', { name: 'New do' })).toBeVisible();
 
     const row = page
       .getByLabel('Datagrid of the documents page 1')
@@ -176,12 +123,13 @@ test.describe('Doc Header', () => {
   test('it checks the options available if administrator', async ({ page }) => {
     await mockedDocument(page, {
       abilities: {
+        accesses_manage: true, // Means admin
+        accesses_view: true,
         destroy: false, // Means not owner
         link_configuration: true,
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: true, // Means admin
         update: true,
         partial_update: true,
         retrieve: true,
@@ -193,16 +141,13 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.locator('h2').getByText('Mocked document'),
-    ).toHaveAttribute('contenteditable');
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
 
-    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
+      page.getByRole('option', { name: 'Delete document' }),
+    ).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -211,30 +156,27 @@ test.describe('Doc Header', () => {
 
     const shareModal = page.getByLabel('Share modal');
 
-    await expect(shareModal.getByLabel('Doc private')).toBeEnabled();
-    await expect(shareModal.getByText('Search by email')).toBeVisible();
-
-    const invitationCard = shareModal.getByLabel('List invitation card');
     await expect(
-      invitationCard.getByText('test@invitation.test'),
-    ).toBeVisible();
-    await expect(
-      invitationCard.getByRole('combobox', { name: 'Role' }),
-    ).toBeEnabled();
-    await expect(
-      invitationCard.getByRole('button', {
-        name: 'delete',
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
       }),
-    ).toBeEnabled();
+    ).not.toHaveAttribute('disabled');
+
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
+    await expect(inputSearch).toBeVisible();
+
+    const member = shareModal
+      .getByTestId('doc-share-member-row-test@accesses.test')
+      .first();
+    await expect(member.getByText('test@accesses.test')).toBeVisible();
+    await expect(member.getByLabel('doc-role-dropdown')).toBeVisible();
+    await member.getByRole('button', { name: 'more_vert' }).click();
 
-    const memberCard = shareModal.getByLabel('List members card');
-    await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
     await expect(
-      memberCard.getByRole('combobox', { name: 'Role' }),
-    ).toBeEnabled();
-    await expect(
-      memberCard.getByRole('button', {
-        name: 'delete',
+      page.getByRole('option', {
+        name: 'Delete',
       }),
     ).toBeEnabled();
   });
@@ -242,12 +184,13 @@ test.describe('Doc Header', () => {
   test('it checks the options available if editor', async ({ page }) => {
     await mockedDocument(page, {
       abilities: {
+        accesses_manage: false, // Means not admin
+        accesses_view: true,
         destroy: false, // Means not owner
         link_configuration: false,
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: false, // Means not admin
         update: true,
         partial_update: true, // Means editor
         retrieve: true,
@@ -266,16 +209,12 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.locator('h2').getByText('Mocked document'),
-    ).toHaveAttribute('contenteditable');
-
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
-    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
+      page.getByRole('option', { name: 'Delete document' }),
+    ).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -284,13 +223,22 @@ test.describe('Doc Header', () => {
 
     const shareModal = page.getByLabel('Share modal');
 
-    await expect(shareModal.getByLabel('Doc private')).toBeDisabled();
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
+    await expect(inputSearch).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
-    await expect(
-      invitationCard.getByText('test@invitation.test'),
-    ).toBeVisible();
+
+    const invitationRow = shareModal.getByTestId(
+      `doc-share-invitation-row-test@invitation.test`,
+    );
+    await expect(invitationRow).toBeVisible();
     await expect(
       invitationCard.getByRole('combobox', { name: 'Role' }),
     ).toHaveAttribute('disabled');
@@ -315,12 +263,13 @@ test.describe('Doc Header', () => {
   test('it checks the options available if reader', async ({ page }) => {
     await mockedDocument(page, {
       abilities: {
+        accesses_manage: false, // Means not admin
+        accesses_view: true,
         destroy: false, // Means not owner
         link_configuration: false,
         versions_destroy: false,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: false, // Means not admin
         update: false,
         partial_update: false, // Means not editor
         retrieve: true,
@@ -339,16 +288,12 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.locator('h2').getByText('Mocked document'),
-    ).not.toHaveAttribute('contenteditable');
-
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
-    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
+    ).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -357,7 +302,11 @@ test.describe('Doc Header', () => {
 
     const shareModal = page.getByLabel('Share modal');
 
-    await expect(shareModal.getByLabel('Doc private')).toBeDisabled();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
     await expect(shareModal.getByText('Search by email')).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
@@ -398,7 +347,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -433,7 +382,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -476,7 +425,7 @@ test.describe('Documents Header mobile', () => {
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: true,
+        accesses_manage: true,
         update: true,
         partial_update: true,
         retrieve: true,
@@ -485,6 +434,7 @@ 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,163 +16,82 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
     await expect(inputSearch).toBeVisible();
 
-    // Select user 1
+    // Select user 1 and verify tag
     await inputSearch.fill('user');
-
     const response = await responsePromise;
     const users = (await response.json()).results as {
       email: string;
+      full_name: string;
     }[];
 
-    await page.getByRole('option', { name: users[0].email }).click();
+    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();
 
-    // Select user 2
+    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
     await inputSearch.fill('user');
-    await page.getByRole('option', { name: users[1].email }).click();
+    await quickSearchContent
+      .getByTestId(`search-user-row-${users[1].email}`)
+      .click();
 
-    // Select email
+    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
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    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();
+    await quickSearchContent.getByText(email).click();
+    await expect(list.getByText(email)).toBeVisible();
 
     // Check roles are displayed
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-
+    await list.getByLabel('doc-role-dropdown').click();
     await expect(page.getByRole('option', { name: 'Reader' })).toBeVisible();
     await expect(page.getByRole('option', { name: 'Editor' })).toBeVisible();
+    await expect(page.getByRole('option', { name: 'Owner' })).toBeVisible();
     await expect(
       page.getByRole('option', { name: 'Administrator' }),
     ).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();
+    // Validate
     await page.getByRole('option', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Invite' }).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 invitation added
+    await expect(
+      quickSearchContent.getByText('Pending invitations'),
+    ).toBeVisible();
+    await expect(quickSearchContent.getByText(email).first()).toBeVisible();
 
     // Check user added
+    await expect(page.getByText('Share with 3 users')).toBeVisible();
     await expect(
-      page.getByText(`User ${user.email} added to the document.`),
+      quickSearchContent.getByText(users[0].full_name).first(),
     ).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(
-      listInvitation.locator('li').getByText('Invited'),
+      quickSearchContent.getByText(users[0].email).first(),
     ).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(
-      page.getByText(`User ${user.email} added to the document.`),
+      quickSearchContent.getByText(users[1].email).first(),
+    ).toBeVisible();
+    await expect(
+      quickSearchContent.getByText(users[1].full_name).first(),
     ).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 ({
@@ -183,32 +102,35 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
 
     const [email] = randomName('test@test.fr', browserName, 1);
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
+    await container.getByLabel('doc-role-dropdown').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: 'Validate' }).click();
+    await page.getByRole('button', { name: 'Invite' }).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.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
+
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    await container.getByLabel('doc-role-dropdown').click();
     await page.getByRole('option', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitationFail = page.waitForResponse(
@@ -216,7 +138,7 @@ test.describe('Document create member', () => {
         response.url().includes('/invitations/') && response.status() === 400,
     );
 
-    await page.getByRole('button', { name: 'Validate' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
     await expect(
       page.getByText(`"${email}" is already invited to the document.`),
     ).toBeVisible();
@@ -237,16 +159,17 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Partager' }).click();
 
-    const inputSearch = page.getByLabel(
-      /Trouver un membre à ajouter au document/,
-    );
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Trouver un membre à ajouter au document',
+    });
 
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choisissez un rôle/ }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
+    await container.getByLabel('doc-role-dropdown').click();
     await page.getByRole('option', { name: 'Administrateur' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
@@ -254,10 +177,10 @@ test.describe('Document create member', () => {
         response.url().includes('/invitations/') && response.status() === 201,
     );
 
-    await page.getByRole('button', { name: 'Valider' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation sent
-    await expect(page.getByText(`Invitation envoyée à ${email}`)).toBeVisible();
+
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
     expect(
@@ -270,14 +193,17 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: '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();
+    await page.getByTestId(`search-user-row-${email}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
+    await container.getByLabel('doc-role-dropdown').click();
     await page.getByRole('option', { name: 'Administrator' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
@@ -285,26 +211,28 @@ test.describe('Document create member', () => {
         response.url().includes('/invitations/') && response.status() === 201,
     );
 
-    await page.getByRole('button', { name: 'Validate' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation sent
-    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
 
-    const listInvitation = page.getByLabel('List invitation card');
-    const li = listInvitation.locator('li').filter({
-      hasText: email,
-    });
-    await expect(li.getByText(email)).toBeVisible();
+    const listInvitation = page.getByTestId('doc-share-quick-search');
+    const userInvitation = listInvitation.getByTestId(
+      `doc-share-invitation-row-${email}`,
+    );
+    await expect(userInvitation).toBeVisible();
 
-    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();
+    await userInvitation.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('option', { name: 'Reader' }).click();
+
+    const moreActions = userInvitation.getByRole('button', {
+      name: 'more_vert',
+    });
+    await moreActions.click();
+
+    await page.getByRole('option', { name: 'delete Delete' }).click();
+
+    await expect(userInvitation).toBeHidden();
   });
 });

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

@@ -1,8 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { waitForElementCount } from '../helpers';
-
-import { addNewMember, createDoc, goToGridDoc } from './common';
+import { addNewMember, createDoc, goToGridDoc, verifyDocName } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -15,16 +13,18 @@ test.describe('Document list members', () => {
       async (route) => {
         const request = route.request();
         const url = new URL(request.url());
-        const pageId = url.searchParams.get('page');
+        const pageId = url.searchParams.get('page') ?? '1';
+
         const accesses = {
-          count: 100,
-          next: 'http://anything/?page=2',
+          count: 40,
+          next: +pageId < 2 ? 'http://anything/?page=2' : undefined,
           previous: null,
           results: Array.from({ length: 20 }, (_, i) => ({
             id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
             user: {
               id: `fc092149-cafa-4ffa-a29d-e4b18af751-${pageId}-${i}`,
               email: `impress@impress.world-page-${pageId}-${i}`,
+              full_name: `Impress World Page ${pageId}-${i}`,
             },
             team: '',
             role: 'editor',
@@ -47,23 +47,20 @@ test.describe('Document list members', () => {
     );
 
     await goToGridDoc(page);
-
     await page.getByRole('button', { name: 'Share' }).click();
 
-    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);
+    const prefix = 'doc-share-member-row';
+    const elements = page.locator(`[data-testid^="${prefix}"]`);
+    const loadMore = page.getByTestId('load-more-members');
 
-    await waitForElementCount(list.locator('li'), 21, 10000);
+    await expect(elements).toHaveCount(20);
+    await expect(page.getByText(`Impress World Page 1-16`)).toBeVisible();
 
-    expect(await list.locator('li').count()).toBeGreaterThan(20);
-    await expect(
-      list.getByText(`impress@impress.world-page-1-16`),
-    ).toBeVisible();
-    await expect(
-      list.getByText(`impress@impress.world-page-2-15`),
-    ).toBeVisible();
+    await loadMore.click();
+    await expect(elements).toHaveCount(40);
+    await expect(page.getByText(`Impress World Page 2-15`)).toBeVisible();
+
+    await expect(loadMore).toBeHidden();
   });
 
   test('it checks a big list of invitations', async ({ page }) => {
@@ -72,10 +69,10 @@ test.describe('Document list members', () => {
       async (route) => {
         const request = route.request();
         const url = new URL(request.url());
-        const pageId = url.searchParams.get('page');
+        const pageId = url.searchParams.get('page') ?? '1';
         const accesses = {
-          count: 100,
-          next: 'http://anything/?page=2',
+          count: 40,
+          next: +pageId < 2 ? 'http://anything/?page=2' : null,
           previous: null,
           results: Array.from({ length: 20 }, (_, i) => ({
             id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
@@ -102,122 +99,120 @@ test.describe('Document list members', () => {
     );
 
     await goToGridDoc(page);
-
     await page.getByRole('button', { name: 'Share' }).click();
 
-    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);
+    const prefix = 'doc-share-invitation';
+    const elements = page.locator(`[data-testid^="${prefix}"]`);
+    const loadMore = page.getByTestId('load-more-invitations');
 
-    await waitForElementCount(list.locator('li'), 21, 10000);
+    await expect(elements).toHaveCount(20);
+    await expect(
+      page.getByText(`impress@impress.world-page-1-16`).first(),
+    ).toBeVisible();
 
-    expect(await list.locator('li').count()).toBeGreaterThan(20);
+    await loadMore.click();
+    await expect(elements).toHaveCount(40);
     await expect(
-      list.getByText(`impress@impress.world-page-1-16`),
-    ).toBeVisible();
-    await expect(
-      list.getByText(`impress@impress.world-page-2-15`),
+      page.getByText(`impress@impress.world-page-2-16`).first(),
     ).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 expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
-
-    const list = page.getByLabel('List members card').locator('ul');
-
-    await expect(list.getByText(`user@${browserName}.e2e`)).toBeVisible();
-
-    const soleOwner = list.getByText(
+    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(
       `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(soleOwner).toBeVisible();
+    await expect(newUser).toBeVisible();
 
-    const username = await addNewMember(page, 0, 'Owner');
+    await currentUserRole.click();
+    await expect(soloOwner).toBeHidden();
+    await list.click();
 
-    await expect(list.getByText(username)).toBeVisible();
-
-    await expect(soleOwner).toBeHidden();
-
-    const otherOwner = list.getByText(
+    const otherOwner = page.getByText(
       `You cannot update the role or remove other owner.`,
     );
 
+    await newUserRoles.click();
     await expect(otherOwner).toBeVisible();
+    await list.click();
 
-    const SelectRoleCurrentUser = list
-      .locator('li')
-      .filter({
-        hasText: `user@${browserName}.e2e`,
-      })
-      .getByRole('combobox', { name: 'Role' });
-
-    await SelectRoleCurrentUser.click();
+    await currentUserRole.click();
     await page.getByRole('option', { name: 'Administrator' }).click();
-    await expect(page.getByText('The role has been updated')).toBeVisible();
+    await list.click();
+    await expect(currentUserRole).toBeVisible();
 
-    const shareModal = page.getByLabel('Share modal');
-
-    // Admin still have the right to share
-    await expect(shareModal.getByLabel('Doc private')).toBeEnabled();
-
-    await SelectRoleCurrentUser.click();
+    await currentUserRole.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.getByLabel('Doc private')).toBeDisabled();
+    await list.click();
+    await expect(currentUserRole).toBeHidden();
   });
 
   test('it checks the delete members', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const list = page.getByLabel('List members card').locator('ul');
+    const list = page.getByTestId('doc-share-quick-search');
 
-    const nameMyself = `user@${browserName}.e2e`;
-    await expect(list.getByText(nameMyself)).toBeVisible();
+    const emailMyself = `user@${browserName}.e2e`;
+    const mySelf = list.getByTestId(`doc-share-member-row-${emailMyself}`);
+    const mySelfMoreActions = mySelf.getByRole('button', { name: 'more_vert' });
 
-    const userOwner = await addNewMember(page, 0, 'Owner');
-    await expect(list.getByText(userOwner)).toBeVisible();
+    const userOwnerEmail = await addNewMember(page, 0, 'Owner');
+    const userOwner = list.getByTestId(
+      `doc-share-member-row-${userOwnerEmail}`,
+    );
+    const userOwnerMoreActions = userOwner.getByRole('button', {
+      name: 'more_vert',
+    });
 
-    const userReader = await addNewMember(page, 0, 'Reader');
-    await expect(list.getByText(userReader)).toBeVisible();
+    const userReaderEmail = await addNewMember(page, 0, 'Reader');
+    const userReader = list.getByTestId(
+      `doc-share-member-row-${userReaderEmail}`,
+    );
+    const userReaderMoreActions = userReader.getByRole('button', {
+      name: 'more_vert',
+    });
 
-    await list
-      .locator('li')
-      .filter({
-        hasText: userReader,
-      })
-      .getByText('delete')
-      .click();
+    await expect(mySelf).toBeVisible();
+    await expect(userOwner).toBeVisible();
+    await expect(userReader).toBeVisible();
 
-    await expect(list.getByText(userReader)).toBeHidden();
+    await expect(userOwnerMoreActions).toBeVisible();
+    await expect(userReaderMoreActions).toBeVisible();
+    await expect(mySelfMoreActions).toBeVisible();
 
-    await list
-      .locator('li')
-      .filter({
-        hasText: nameMyself,
-      })
-      .getByText('delete')
-      .click();
-
-    await expect(list.getByText(nameMyself)).toBeHidden();
+    await userReaderMoreActions.click();
+    await page.getByRole('option', { name: 'Delete' }).click();
+    await expect(userReader).toBeHidden();
 
+    await mySelfMoreActions.click();
+    await page.getByRole('option', { name: 'Delete' }).click();
     await expect(
-      page.getByText('The member has been removed from the document').first(),
+      page.getByText('You do not have permission to perform this action.'),
     ).toBeVisible();
-
-    await expect(
-      page.getByRole('heading', { name: 'Share', level: 3 }),
-    ).toBeHidden();
   });
 });

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

@@ -7,11 +7,27 @@ test.describe('Doc Routing', () => {
     await page.goto('/');
   });
 
+  test('Check the presence of the meta tag noindex', async ({ page }) => {
+    const buttonCreateHomepage = page.getByRole('button', {
+      name: 'New doc',
+    });
+
+    await expect(buttonCreateHomepage).toBeVisible();
+    await buttonCreateHomepage.click();
+    await expect(
+      page.getByRole('button', {
+        name: 'Share',
+      }),
+    ).toBeVisible();
+    const metaDescription = page.locator('meta[name="robots"]');
+    await expect(metaDescription).toHaveAttribute('content', 'noindex');
+  });
+
   test('checks alias docs url with homepage', async ({ page }) => {
     await expect(page).toHaveURL('/');
 
     const buttonCreateHomepage = page.getByRole('button', {
-      name: 'Create a new document',
+      name: 'New doc',
     });
 
     await expect(buttonCreateHomepage).toBeVisible();

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc } from './common';
+import { createDoc, goToGridDoc, verifyDocName } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -17,7 +17,7 @@ test.describe('Doc Table Content', () => {
       1,
     );
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -36,6 +36,7 @@ test.describe('Doc Table Content', () => {
     await page.getByRole('button', { name: 'Strike' }).click();
 
     await page.locator('.bn-block-outer').first().click();
+    await editor.click();
     await page.locator('.bn-block-outer').last().click();
 
     // Create space to fill the viewport
@@ -107,7 +108,7 @@ test.describe('Doc Table Content', () => {
       1,
     );
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
     await expect(page.getByLabel('Open the panel')).toBeHidden();
 
     const editor = page.locator('.ProseMirror');

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

@@ -1,6 +1,11 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc, mockedDocument } from './common';
+import {
+  createDoc,
+  goToGridDoc,
+  mockedDocument,
+  verifyDocName,
+} from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -10,7 +15,7 @@ test.describe('Doc Version', () => {
   test('it displays the doc versions', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -79,12 +84,12 @@ test.describe('Doc Version', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
+    await verifyDocName(page, 'Mocked document');
 
     await page.getByLabel('Open the document options').click();
     await expect(
       page.getByRole('button', { name: 'Version history' }),
-    ).toBeHidden();
+    ).toBeDisabled();
 
     await page.getByRole('button', { name: 'Table of content' }).click();
 
@@ -95,12 +100,12 @@ test.describe('Doc Version', () => {
 
   test('it restores the doc version', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
-
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.locator('.bn-block-outer').last().click();
     await page.locator('.bn-block-outer').last().fill('Hello');
 
+    expect(true).toBe(true);
     await goToGridDoc(page, {
       title: randomDoc,
     });
@@ -152,7 +157,7 @@ test.describe('Doc Version', () => {
   }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     const editor = page.locator('.ProseMirror');
     await editor.locator('.bn-block-outer').last().click();

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

@@ -1,40 +1,14 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, keyCloakSignIn } from './common';
+import { createDoc, keyCloakSignIn, verifyDocName } from './common';
+
+const browsersName = ['chromium', 'webkit', 'firefox'];
 
 test.describe('Doc Visibility', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/');
   });
 
-  test('Make a public doc', async ({ page, browserName }) => {
-    const [docTitle] = await createDoc(
-      page,
-      'My new doc',
-      browserName,
-      1,
-      true,
-    );
-
-    const header = page.locator('header').first();
-    await header.locator('h2').getByText('Docs').click();
-
-    const datagrid = page.getByLabel('Datagrid of the documents page 1');
-    const datagridTable = datagrid.getByRole('table');
-
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-      timeout: 10000,
-    });
-
-    await expect(datagridTable.getByText(docTitle)).toBeVisible();
-
-    const row = datagridTable.getByRole('row').filter({
-      hasText: docTitle,
-    });
-
-    await expect(row.getByRole('cell').nth(0)).toHaveText('Public');
-  });
-
   test('It checks the copy link button', async ({ page, browserName }) => {
     // eslint-disable-next-line playwright/no-skipped-test
     test.skip(
@@ -56,12 +30,48 @@ test.describe('Doc Visibility', () => {
 
     expect(clipboardContent).toMatch(page.url());
   });
+
+  test('It checks the link role options', async ({ page, browserName }) => {
+    await createDoc(page, 'Doc role options', browserName, 1);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    const selectVisibility = page.getByRole('combobox', {
+      name: 'Visibility',
+    });
+
+    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('option', {
+        name: 'Authenticated',
+      })
+      .click();
+
+    await expect(page.getByLabel('Read only')).toBeVisible();
+    await expect(page.getByLabel('Can read and edit')).toBeVisible();
+
+    await selectVisibility.click();
+
+    await page
+      .getByRole('option', {
+        name: 'Public',
+      })
+      .click();
+
+    await expect(page.getByLabel('Read only')).toBeVisible();
+    await expect(page.getByLabel('Can read and edit')).toBeVisible();
+  });
 });
 
-test.describe('Doc Visibility: Not loggued', () => {
+test.describe('Doc Visibility: Restricted', () => {
   test.use({ storageState: { cookies: [], origins: [] } });
 
-  test('A public doc is accessible even when not authentified.', async ({
+  test('A doc is not accessible when not authentified.', async ({
     page,
     browserName,
   }) => {
@@ -70,14 +80,161 @@ test.describe('Doc Visibility: Not loggued', () => {
 
     const [docTitle] = await createDoc(
       page,
-      'My new doc',
+      'Restricted no auth',
       browserName,
       1,
-      true,
     );
 
+    await verifyDocName(page, docTitle);
+
+    const urlDoc = page.url();
+
+    await page
+      .getByRole('button', {
+        name: 'Logout',
+      })
+      .click();
+
+    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
+
+    await page.goto(urlDoc);
+
+    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+  });
+
+  test('A doc is not accessible when authentified but not member.', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
+
+    await verifyDocName(page, docTitle);
+
+    const urlDoc = page.url();
+
+    await page
+      .getByRole('button', {
+        name: 'Logout',
+      })
+      .click();
+
+    const otherBrowser = browsersName.find((b) => b !== browserName);
+
+    await keyCloakSignIn(page, otherBrowser!);
+
+    await page.goto(urlDoc);
+
     await expect(
-      page.getByText('The document visiblitity has been updated.'),
+      page.getByText('You do not have permission to perform this action.'),
+    ).toBeVisible();
+  });
+
+  test('A doc is accessible when member.', async ({ page, browserName }) => {
+    test.slow();
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
+
+    await verifyDocName(page, docTitle);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
+
+    const otherBrowser = browsersName.find((b) => b !== browserName);
+    const username = `user@${otherBrowser}.e2e`;
+    await inputSearch.fill(username);
+    await page.getByTestId(`search-user-row-${username}`).click();
+
+    // Choose a role
+
+    const container = page.getByTestId('doc-share-add-member-list');
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('option', { name: 'Administrator' }).click();
+
+    await page.getByRole('button', { name: 'Invite' }).click();
+
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
+
+    const urlDoc = page.url();
+
+    await page
+      .getByRole('button', {
+        name: 'Logout',
+      })
+      .click();
+
+    await keyCloakSignIn(page, otherBrowser!);
+
+    await page.goto(urlDoc);
+
+    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
+  });
+});
+
+test.describe('Doc Visibility: Public', () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+
+  test('It checks a public doc in read only mode', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(
+      page,
+      'Public read only',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, docTitle);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+
+    await page
+      .getByRole('option', {
+        name: 'Public',
+      })
+      .click();
+
+    await expect(
+      page.getByText('The document visibility has been updated.'),
+    ).toBeVisible();
+
+    await page.getByLabel('Read only').click();
+
+    await expect(
+      page.getByText('The document visibility has been updated.').first(),
+    ).toBeVisible();
+
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
+
+    const cardContainer = page.getByLabel(
+      'It is the card information about the document.',
+    );
+
+    await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
+
+    await expect(
+      cardContainer.getByText('Public document', { exact: true }),
     ).toBeVisible();
 
     const urlDoc = page.url();
@@ -94,19 +251,58 @@ test.describe('Doc Visibility: Not loggued', () => {
 
     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'),
+    ).toBeVisible();
   });
 
-  test('A private doc redirect to the OIDC when not authentified.', async ({
+  test('It checks a public doc in editable mode', async ({
     page,
     browserName,
   }) => {
-    test.slow();
     await page.goto('/');
     await keyCloakSignIn(page, browserName);
 
-    const [docTitle] = await createDoc(page, 'My private doc', browserName, 1);
+    const [docTitle] = await createDoc(page, 'Public editable', browserName, 1);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+
+    await page
+      .getByRole('option', {
+        name: 'Public',
+      })
+      .click();
+
+    await expect(
+      page.getByText('The document visibility has been updated.'),
+    ).toBeVisible();
+
+    await page.getByLabel('Can read and edit').click();
+
+    await expect(
+      page.getByText('The document visibility has been updated.').first(),
+    ).toBeVisible();
+
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
+
+    const cardContainer = page.getByLabel(
+      'It is the card information about the document.',
+    );
+
+    await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
+
+    await expect(
+      cardContainer.getByText('Public document', { exact: true }),
+    ).toBeVisible();
 
     const urlDoc = page.url();
 
@@ -116,10 +312,217 @@ test.describe('Doc Visibility: Not loggued', () => {
       })
       .click();
 
-    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
 
     await page.goto(urlDoc);
 
-    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+    await verifyDocName(page, docTitle);
+    await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
+    await expect(
+      page.getByText('Read only, you cannot edit this document'),
+    ).toBeHidden();
+  });
+});
+
+test.describe('Doc Visibility: Authenticated', () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+
+  test('A doc is not accessible when unauthentified.', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(
+      page,
+      'Authenticated unauthentified',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, docTitle);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+    await page
+      .getByRole('option', {
+        name: 'Authenticated',
+      })
+      .click();
+
+    await expect(
+      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
+      .getByRole('button', {
+        name: 'Logout',
+      })
+      .click();
+
+    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
+
+    await page.goto(urlDoc);
+
+    await expect(page.locator('h2').getByText(docTitle)).toBeHidden();
+    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+  });
+
+  test('It checks a authenticated doc in read only mode', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(
+      page,
+      'Authenticated read only',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, docTitle);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+    await page
+      .getByRole('option', {
+        name: 'Authenticated',
+      })
+      .click();
+
+    await expect(
+      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
+      .getByRole('button', {
+        name: 'Logout',
+      })
+      .click();
+
+    const otherBrowser = browsersName.find((b) => b !== browserName);
+    await keyCloakSignIn(page, otherBrowser!);
+
+    await page.goto(urlDoc);
+
+    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(
+      page.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
+
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
+
+    await expect(inputSearch).toBeHidden();
+  });
+
+  test('It checks a authenticated doc in editable mode', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(
+      page,
+      'Authenticated editable',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, docTitle);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+    await page
+      .getByRole('option', {
+        name: 'Authenticated',
+      })
+      .click();
+
+    await expect(
+      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.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.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
+
+    await page
+      .getByRole('button', {
+        name: 'Logout',
+      })
+      .click();
+
+    const otherBrowser = browsersName.find((b) => b !== browserName);
+    await keyCloakSignIn(page, otherBrowser!);
+
+    await page.goto(urlDoc);
+
+    await verifyDocName(page, docTitle);
+    await page.getByRole('button', { name: 'Share' }).click();
+    await expect(
+      page.getByText('Read only, you cannot edit this document'),
+    ).toBeHidden();
+
+    await expect(
+      page.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
+
+    await expect(inputSearch).toBeHidden();
   });
 });

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

@@ -1,77 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { goToGridDoc } from './common';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-});
-
-test.describe('Footer', () => {
-  test('checks all the elements are visible', async ({ page }) => {
-    const footer = page.locator('footer').first();
-
-    await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'legifrance.gouv.fr' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'info.gouv.fr' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'service-public.fr' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'data.gouv.fr' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'Legal Notice' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'Personal data and cookies' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'Accessibility' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByText(
-        'Unless otherwise stated, all content on this site is under licence',
-      ),
-    ).toBeVisible();
-  });
-
-  test('checks footer is not visible on doc editor', async ({ page }) => {
-    await expect(page.locator('footer')).toBeVisible();
-    await goToGridDoc(page);
-    await expect(page.locator('footer')).toBeHidden();
-  });
-
-  const legalPages = [
-    { name: 'Legal Notice', url: '/legal-notice/' },
-    { name: 'Personal data and cookies', url: '/personal-data-cookies/' },
-    { name: 'Accessibility', url: '/accessibility/' },
-  ];
-  for (const { name, url } of legalPages) {
-    test(`checks ${name} page`, async ({ page }) => {
-      const footer = page.locator('footer').first();
-      await footer.getByRole('link', { name }).click();
-
-      await expect(
-        page
-          .getByRole('heading', {
-            name,
-          })
-          .first(),
-      ).toBeVisible();
-
-      await expect(page).toHaveURL(url);
-    });
-  }
-});

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

@@ -75,29 +75,15 @@ 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 Docs' }),
+    ).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,11 +6,7 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Language', () => {
   test('checks the language picker', async ({ page }) => {
-    await expect(
-      page.getByRole('button', {
-        name: 'Create a new document',
-      }),
-    ).toBeVisible();
+    await expect(page.getByLabel('Logout')).toBeVisible();
 
     const header = page.locator('header').first();
     await header.getByRole('combobox').getByText('English').click();
@@ -19,10 +15,48 @@ test.describe('Language', () => {
       header.getByRole('combobox').getByText('Français'),
     ).toBeVisible();
 
+    await expect(page.getByLabel('Se déconnecter')).toBeVisible();
+
+    await header.getByRole('combobox').getByText('Français').click();
+    await header.getByRole('option', { name: 'Deutsch' }).click();
     await expect(
-      page.getByRole('button', {
-        name: 'Créer un nouveau document',
-      }),
+      header.getByRole('combobox').getByText('Deutsch'),
     ).toBeVisible();
+
+    await expect(page.getByLabel('Abmelden')).toBeVisible();
+  });
+
+  test('checks that backend uses the same language as the frontend', async ({
+    page,
+  }) => {
+    // Helper function to intercept and assert 404 response
+    const check404Response = async (expectedDetail: string) => {
+      const expectedBackendResponse = page.waitForResponse(
+        (response) =>
+          response.url().includes('/api') &&
+          response.url().includes('non-existent-doc-uuid') &&
+          response.status() === 404,
+      );
+
+      // Trigger the specific 404 XHR response by navigating to a non-existent document
+      await page.goto('/docs/non-existent-doc-uuid');
+
+      // Assert that the intercepted error message is in the expected language
+      const interceptedBackendResponse = await expectedBackendResponse;
+      expect(await interceptedBackendResponse.json()).toStrictEqual({
+        detail: expectedDetail,
+      });
+    };
+
+    // Check for English 404 response
+    await check404Response('Not found.');
+
+    // Switch language to French
+    const header = page.locator('header').first();
+    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('option', { name: 'Français' }).click();
+
+    // Check for French 404 response
+    await check404Response('Pas trouvé.');
   });
 });

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

@@ -0,0 +1,48 @@
+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": "1.5.1",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "lint": "eslint . --ext .ts",
@@ -12,7 +12,7 @@
     "test:ui::chromium": "yarn test:ui --project=chromium"
   },
   "devDependencies": {
-    "@playwright/test": "1.48.1",
+    "@playwright/test": "1.49.0",
     "@types/node": "*",
     "@types/pdf-parse": "1.1.4",
     "eslint-config-impress": "*",

src/frontend/apps/impress/.env

@@ -1,5 +1,2 @@
 NEXT_PUBLIC_API_ORIGIN=
-NEXT_PUBLIC_Y_PROVIDER_URL=
-NEXT_PUBLIC_MEDIA_URL=
-NEXT_PUBLIC_THEME=dsfr
 NEXT_PUBLIC_SW_DEACTIVATED=

src/frontend/apps/impress/.env.development

@@ -1,4 +1,2 @@
 NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
-NEXT_PUBLIC_Y_PROVIDER_URL=ws://localhost:4444
-NEXT_PUBLIC_MEDIA_URL=http://localhost:8083
 NEXT_PUBLIC_SW_DEACTIVATED=true

src/frontend/apps/impress/.env.test

@@ -1,2 +1 @@
 NEXT_PUBLIC_API_ORIGIN=http://test.jest
-NEXT_PUBLIC_THEME=test-theme

src/frontend/apps/impress/cunningham.ts

@@ -5,22 +5,60 @@ 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.50rem',
+            xl: '1.25rem',
             t: '0.6875rem',
             s: '0.75rem',
-            h1: '2.2rem',
-            h2: '1.7rem',
-            h3: '1.37rem',
-            h4: '1.15rem',
-            h5: '1rem',
-            h6: '0.87rem',
+            h1: '2rem',
+            h2: '1.75rem',
+            h3: '1.5rem',
+            h4: '1.375rem',
+            h5: '1.25rem',
+            h6: '1.125rem',
           },
           weights: {
             thin: 100,
@@ -34,6 +72,21 @@ 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',
@@ -104,7 +157,7 @@ const config = {
             focus: 'var(--c--components--forms-select--border-radius)',
           },
           'font-size': 'var(--c--theme--font--sizes--ml)',
-          'menu-background-color': '#ffffff',
+          'menu-background-color': '#fff',
           'item-background-color': {
             hover: 'var(--c--theme--colors--primary-300)',
           },
@@ -126,7 +179,7 @@ const config = {
           },
         },
         modal: {
-          'background-color': '#ffffff',
+          'background-color': '#fff',
         },
         button: {
           'border-radius': {
@@ -178,7 +231,9 @@ const config = {
             color: 'var(--c--theme--colors--primary-text)',
             'color-disabled': 'var(--c--theme--colors--greyscale-600)',
             background: {
-              'color-hover': 'var(--c--theme--colors--primary-100)',
+              color: 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--primary-300)',
+              'color-active': 'var(--c--theme--colors--primary-100)',
               'color-disabled': 'var(--c--theme--colors--greyscale-200)',
             },
           },
@@ -197,19 +252,19 @@ const config = {
     dsfr: {
       theme: {
         colors: {
-          'card-border': '#ededed',
+          'card-border': '#E5E5E5',
           'primary-text': '#000091',
-          'primary-100': '#f5f5fe',
+          'primary-100': '#ECECFE',
           'primary-150': '#F4F4FD',
-          'primary-200': '#ececfe',
-          'primary-300': '#e3e3fd',
-          'primary-400': '#cacafb',
-          'primary-500': '#6a6af4',
-          'primary-600': '#000091',
+          'primary-200': '#E3E3FD',
+          'primary-300': '#CACAFB',
+          'primary-400': '#8585F6',
+          'primary-500': '#6A6AF4',
+          'primary-600': '#313178',
           'primary-700': '#272747',
-          'primary-800': '#21213f',
-          'primary-900': '#1c1a36',
-          'secondary-text': '#FFFFFF',
+          'primary-800': '#000091',
+          'primary-900': '#21213F',
+          'secondary-text': '#fff',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -220,16 +275,22 @@ const config = {
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
           'greyscale-text': '#303C4B',
-          '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',
+          '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',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -297,9 +358,9 @@ const config = {
               'color-hover': '#1212ff',
               'color-active': '#2323ff',
             },
-            color: '#ffffff',
-            'color-hover': '#ffffff',
-            'color-active': '#ffffff',
+            color: '#fff',
+            'color-hover': '#fff',
+            'color-active': '#fff',
           },
           'primary-text': {
             background: {
@@ -358,10 +419,12 @@ const config = {
         },
         'forms-field': {
           color: 'var(--c--theme--colors--primary-text)',
+          'footer-font-size': 'var(--c--theme--font--sizes--t)',
+          'footer-color': 'var(--c--theme--colors--greyscale-text)',
         },
         'forms-input': {
           'border-radius': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           '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)',
@@ -372,11 +435,14 @@ const config = {
             big: 'var(--c--theme--colors--primary-text)',
           },
         },
+        'forms-radio': {
+          'accent-color': 'var(--c--theme--colors--primary-600)',
+        },
         'forms-select': {
           'item-font-size': '14px',
           'border-radius': '4px',
           'border-radius-hover': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           '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": "1.5.1",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -19,36 +19,42 @@
     "@blocknote/mantine": "*",
     "@blocknote/react": "*",
     "@gouvfr-lasuite/integration": "1.0.2",
-    "@hocuspocus/provider": "2.13.7",
+    "@hocuspocus/provider": "2.14.0",
     "@openfun/cunningham-react": "2.9.4",
-    "@tanstack/react-query": "5.59.15",
-    "i18next": "23.16.0",
+    "@sentry/nextjs": "8.40.0",
+    "@tanstack/react-query": "5.61.3",
+    "cmdk": "^1.0.4",
+    "crisp-sdk-web": "1.0.25",
+    "i18next": "24.0.0",
+    "i18next-browser-languagedetector": "8.0.0",
     "idb": "8.0.0",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
-    "next": "14.2.15",
+    "next": "15.0.3",
     "react": "*",
-    "react-aria-components": "1.4.1",
+    "react-aria-components": "1.5.0",
     "react-dom": "*",
-    "react-i18next": "15.0.3",
-    "react-select": "5.8.1",
+    "react-i18next": "15.1.1",
+    "react-intersection-observer": "9.13.1",
+    "react-select": "5.8.3",
     "styled-components": "6.1.13",
+    "use-debounce": "10.0.4",
     "y-protocols": "1.0.6",
     "yjs": "*",
-    "zustand": "5.0.0"
+    "zustand": "5.0.1"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
-    "@tanstack/react-query-devtools": "5.59.15",
+    "@tanstack/react-query-devtools": "5.61.3",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.1",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.13",
-    "@types/lodash": "4.17.10",
+    "@types/jest": "29.5.14",
+    "@types/lodash": "4.17.13",
     "@types/luxon": "3.4.2",
     "@types/node": "*",
-    "@types/react": "18.3.11",
+    "@types/react": "18.3.12",
     "@types/react-dom": "*",
     "cross-env": "*",
     "dotenv": "16.4.5",
@@ -62,7 +68,7 @@
     "stylelint-config-standard": "36.0.1",
     "stylelint-prettier": "5.0.2",
     "typescript": "*",
-    "webpack": "5.95.0",
-    "workbox-webpack-plugin": "7.1.0"
+    "webpack": "5.96.1",
+    "workbox-webpack-plugin": "7.3.0"
   }
 }

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

@@ -1,26 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-
-import { AppWrapper } from '@/tests/utils';
-
-import Page from '../pages';
-
-jest.mock('next/navigation', () => ({
-  useRouter() {
-    return {
-      push: 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/api/config.ts

@@ -0,0 +1,6 @@
+export const backendUrl = () =>
+  process.env.NEXT_PUBLIC_API_ORIGIN ||
+  (typeof window !== 'undefined' ? window.location.origin : '');
+
+export const baseApiUrl = (apiVersion: string = '1.0') =>
+  `${backendUrl()}/api/v${apiVersion}/`;

src/frontend/apps/impress/src/api/fetchApi.ts

@@ -1,5 +1,4 @@
-import { baseApiUrl } from '@/core';
-
+import { baseApiUrl } from './config';
 import { getCSRFToken } from './utils';
 
 interface FetchAPIInit extends RequestInit {

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

@@ -1,4 +1,5 @@
 export * from './APIError';
+export * from './config';
 export * from './fetchApi';
 export * from './helpers';
 export * from './types';

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef, ReactHTML } from 'react';
 import styled from 'styled-components';
-import { CSSProperties } from 'styled-components/dist/types';
+import { CSSProperties, RuleSet } from 'styled-components/dist/types';
 
 import {
   MarginPadding,
@@ -15,11 +15,11 @@ export interface BoxProps {
   $align?: CSSProperties['alignItems'];
   $background?: CSSProperties['background'];
   $color?: CSSProperties['color'];
-  $css?: string;
+  $css?: string | RuleSet<object>;
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
   $effect?: 'show' | 'hide';
-  $flex?: boolean;
+  $flex?: CSSProperties['flex'];
   $gap?: CSSProperties['gap'];
   $hasTransition?: boolean | 'slow';
   $height?: CSSProperties['height'];
@@ -50,7 +50,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $color }) => $color && `color: ${$color};`}
   ${({ $direction }) => $direction && `flex-direction: ${$direction};`}
   ${({ $display }) => $display && `display: ${$display};`}
-  ${({ $flex }) => $flex === false && `display: block;`}
+  ${({ $flex }) => $flex && `flex: ${$flex};`}
   ${({ $gap }) => $gap && `gap: ${$gap};`}
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $hasTransition }) =>
@@ -73,7 +73,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
-  ${({ $css }) => $css && `${$css};`}
+  ${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)}
   ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
   ${({ $effect }) => {
     let effect;

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

@@ -1,8 +1,13 @@
-import { ComponentPropsWithRef, forwardRef } from 'react';
+import { forwardRef } from 'react';
+import { css } from 'styled-components';
 
 import { Box, BoxType } from './Box';
 
-export type BoxButtonType = ComponentPropsWithRef<typeof BoxButton>;
+export type BoxButtonType = BoxType & {
+  disabled?: boolean;
+};
+
+/**
 
 /**
  * Styleless button that extends the Box component.
@@ -17,7 +22,7 @@ export type BoxButtonType = ComponentPropsWithRef<typeof BoxButton>;
  *  </BoxButton>
  * ```
  */
-const BoxButton = forwardRef<HTMLDivElement, BoxType>(
+const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
   ({ $css, ...props }, ref) => {
     return (
       <Box
@@ -26,15 +31,25 @@ const BoxButton = forwardRef<HTMLDivElement, BoxType>(
         $background="none"
         $margin="none"
         $padding="none"
-        $css={`
-          cursor: pointer;
+        $css={css`
+          cursor: ${props.disabled ? 'not-allowed' : '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

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { css } from 'styled-components';
 
 import { useCunninghamTheme } from '@/cunningham';
 
@@ -15,9 +16,8 @@ export const Card = ({
     <Box
       $background="white"
       $radius="4px"
-      $css={`
-        box-shadow: 2px 2px 5px ${colorsTokens()['greyscale-300']};
-        border: 1px solid ${colorsTokens()['card-border']};
+      $css={css`
+        border: 1px solid ${colorsTokens()['greyscale-200']};
         ${$css}
       `}
       {...props}

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

@@ -1,9 +1,4 @@
-import React, {
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useState,
-} from 'react';
+import { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
 import { Button, DialogTrigger, Popover } from 'react-aria-components';
 import styled from 'styled-components';
 
@@ -11,7 +6,7 @@ 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;
@@ -29,9 +24,10 @@ const StyledButton = styled(Button)`
   text-wrap: nowrap;
 `;
 
-interface DropButtonProps {
+export interface DropButtonProps {
   button: ReactNode;
   isOpen?: boolean;
+  label?: string;
   onOpenChange?: (isOpen: boolean) => void;
 }
 
@@ -39,6 +35,7 @@ export const DropButton = ({
   button,
   isOpen = false,
   onOpenChange,
+  label,
   children,
 }: PropsWithChildren<DropButtonProps>) => {
   const [opacity, setOpacity] = useState(false);
@@ -58,7 +55,7 @@ export const DropButton = ({
 
   return (
     <DialogTrigger onOpenChange={onOpenChangeHandler} isOpen={isLocalOpen}>
-      <StyledButton>{button}</StyledButton>
+      <StyledButton aria-label={label}>{button}</StyledButton>
       <StyledPopover
         style={{ opacity: opacity ? 1 : 0 }}
         isOpen={isLocalOpen}

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

@@ -0,0 +1,140 @@
+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;
+};
+
+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);
+  };
+
+  console.log('topMessage', topMessage);
+  return (
+    <DropButton
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      label={label}
+      button={
+        showArrow ? (
+          <Box $direction="row" $align="center">
+            <div>{children}</div>
+            <Icon
+              $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="1000"
+            $wrap="wrap"
+            $size="xs"
+            $weight="bold"
+            $padding={{ vertical: 'xs', horizontal: 'base' }}
+          >
+            {topMessage}
+          </Text>
+        )}
+        {options.map((option) => {
+          const isDisabled = option.disabled !== undefined && option.disabled;
+          return (
+            <BoxButton
+              role="option"
+              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;
+                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
+                  $margin={{ top: '-3px' }}
+                  $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,6 +1,19 @@
+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;
 }
@@ -29,23 +42,21 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
   );
 };
 
-interface IconOptionsProps {
-  isOpen: boolean;
-  'aria-label': string;
-}
+type IconOptionsProps = TextType & {
+  isHorizontal?: boolean;
+};
 
-export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
+export const IconOptions = ({ isHorizontal, ...props }: IconOptionsProps) => {
   return (
     <Text
-      aria-label={props['aria-label']}
+      {...props}
       $isMaterialIcon
-      $css={`
-        transition: all 0.3s ease-in-out;
-        transform: rotate(${isOpen ? '90' : '0'}deg);
+      $css={css`
         user-select: none;
+        ${props.$css}
       `}
     >
-      more_vert
+      {isHorizontal ? 'more_horiz' : 'more_vert'}
     </Text>
   );
 };

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

@@ -0,0 +1,35 @@
+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/SimpleLoader.tsx

@@ -0,0 +1,48 @@
+import { css } from 'styled-components';
+
+import { Box } from './Box';
+
+type Props = {
+  size?: 'small' | 'medium' | 'large';
+};
+export const SimpleLoader = ({ size = 'medium' }: Props) => {
+  return (
+    <Box
+      className={size}
+      $css={css`
+        display: inline-block;
+        border: 3px solid var(--c--theme--colors--primary-300);
+        border-radius: 50%;
+        border-top-color: var(--c--theme--colors--primary-600);
+        animation: spin 1s ease-in-out infinite;
+        -webkit-animation: spin 1s ease-in-out infinite;
+
+        &.small {
+          width: 24px;
+          height: 24px;
+        }
+
+        &.medium {
+          width: 38px;
+          height: 38px;
+        }
+
+        &.large {
+          width: 50px;
+          height: 50px;
+        }
+
+        @keyframes spin {
+          to {
+            -webkit-transform: rotate(360deg);
+          }
+        }
+        @-webkit-keyframes spin {
+          to {
+            -webkit-transform: rotate(360deg);
+          }
+        }
+      `}
+    />
+  );
+};

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

@@ -1,4 +1,9 @@
-import { CSSProperties, ComponentPropsWithRef, ReactHTML } from 'react';
+import {
+  CSSProperties,
+  ComponentPropsWithRef,
+  ReactHTML,
+  forwardRef,
+} from 'react';
 import styled from 'styled-components';
 
 import { tokens } from '@/cunningham';
@@ -28,6 +33,7 @@ export interface TextProps extends BoxProps {
     | 'greyscale';
   $variation?:
     | 'text'
+    | '000'
     | '100'
     | '200'
     | '300'
@@ -36,7 +42,8 @@ export interface TextProps extends BoxProps {
     | '600'
     | '700'
     | '800'
-    | '900';
+    | '900'
+    | '1000';
 }
 
 export type TextType = ComponentPropsWithRef<typeof Text>;
@@ -55,18 +62,21 @@ export const TextStyled = styled(Box)<TextProps>`
     `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`}
 `;
 
-export const Text = ({
-  className,
-  $isMaterialIcon,
-  ...props
-}: ComponentPropsWithRef<typeof TextStyled>) => {
-  return (
-    <TextStyled
-      as="span"
-      $theme="greyscale"
-      $variation="text"
-      className={`${className || ''}${$isMaterialIcon ? ' material-icons' : ''}`}
-      {...props}
-    />
-  );
-};
+const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>(
+  ({ className, $isMaterialIcon, ...props }, ref) => {
+    return (
+      <TextStyled
+        ref={ref}
+        as="span"
+        $theme="greyscale"
+        $variation="text"
+        className={`${className || ''}${$isMaterialIcon ? ' material-icons' : ''}`}
+        {...props}
+      />
+    );
+  },
+);
+
+Text.displayName = 'Text';
+
+export { 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: 4rem;
-      padding-right: 4rem;
+      padding-left: 2.5rem;
+      padding-right: 2.5rem;
       padding-top: 3rem;
       padding-bottom: 0.5rem;`);
   });

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

@@ -2,9 +2,11 @@ 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 './SideModal';
+export * from './separators/SeparatedSection';
 export * from './Text';
 export * from './TextErrors';

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

@@ -0,0 +1,88 @@
+import { Command } from 'cmdk';
+import { ReactNode, useRef } from 'react';
+
+import { Box } from '../Box';
+
+import { QuickSearchGroup } from './QuickSearchGroup';
+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<T> = {
+  data: QuickSearchData<T>[];
+  onFilter?: (str: string) => void;
+  renderElement: (element: T) => ReactNode;
+  onSelect?: (element: T) => void;
+  inputValue?: string;
+  inputContent?: ReactNode;
+  showInput?: boolean;
+  loading?: boolean;
+  label?: string;
+  placeholder?: string;
+  children?: ReactNode;
+};
+
+export const QuickSearch = <T,>({
+  onSelect,
+  onFilter,
+  inputContent,
+  inputValue,
+  loading,
+  showInput = true,
+  data,
+  renderElement,
+  label,
+  placeholder,
+  children,
+}: QuickSearchProps<T>) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <QuickSearchStyle />
+      <div className="quick-search-container">
+        <Command label={label} shouldFilter={false} ref={ref}>
+          {showInput && (
+            <QuickSearchInput
+              loading={loading}
+              inputValue={inputValue}
+              onFilter={onFilter}
+              placeholder={placeholder}
+            >
+              {inputContent}
+            </QuickSearchInput>
+          )}
+          <Command.List>
+            <Box>
+              {!loading &&
+                data.map((group) => {
+                  return (
+                    <QuickSearchGroup
+                      key={group.groupName}
+                      group={group}
+                      onSelect={onSelect}
+                      renderElement={renderElement}
+                    />
+                  );
+                })}
+              {children}
+            </Box>
+          </Command.List>
+        </Command>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,61 @@
+import { Command } from 'cmdk';
+
+import { QuickSearchData, QuickSearchProps } from './QuickSearch';
+import { QuickSearchItem } from './QuickSearchItem';
+
+type Props<T> = {
+  group: QuickSearchData<T>;
+  onSelect?: QuickSearchProps<T>['onSelect'];
+  renderElement: QuickSearchProps<T>['renderElement'];
+};
+
+export const QuickSearchGroup = <T,>({
+  group,
+  onSelect,
+  renderElement,
+}: Props<T>) => {
+  return (
+    <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
+            key={`${group.groupName}-element-${index}`}
+            onSelect={() => {
+              console.log('onSelect', groupElement);
+              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>
+  );
+};

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

@@ -0,0 +1,66 @@
+import { Loader } from '@openfun/cunningham-react';
+import { Command } from 'cmdk';
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { HorizontalSeparator } from '@/components/separators/HorizontalSeparator';
+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;
+};
+export const QuickSearchInput = ({
+  loading,
+  inputValue,
+  onFilter,
+  placeholder,
+  children,
+}: Props) => {
+  const { t } = useTranslation();
+  const { spacingsTokens } = useCunninghamTheme();
+  const spacing = spacingsTokens();
+
+  if (children) {
+    return (
+      <>
+        {children}
+        <HorizontalSeparator />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Box
+        $direction="row"
+        $align="center"
+        $gap={spacing['2xs']}
+        $padding={{ horizontal: '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('Find a member to add to the document')}
+          value={inputValue}
+          role="combobox"
+          placeholder={placeholder ?? t('Search')}
+          onValueChange={onFilter}
+        />
+      </Box>
+      <HorizontalSeparator />
+    </>
+  );
+};

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

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

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+
+import { useCunninghamTheme } from '@/cunningham';
+
+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();
+
+  return (
+    <Box
+      $direction="row"
+      $align="center"
+      $padding={{ horizontal: '2xs', vertical: '3xs' }}
+      $justify="space-between"
+      $width="100%"
+    >
+      <Box $direction="row" $align="center" $gap={spacings['2xs']}>
+        {left}
+      </Box>
+
+      {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

@@ -0,0 +1,158 @@
+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-vercel-badge] {
+    height: 20px;
+    background: var(--c--theme--colors--greyscale-700);
+    display: inline-flex;
+    align-items: center;
+    padding: 0 8px;
+    font-size: 12px;
+    color: var(--c--theme--colors--greyscale-500);
+    border-radius: 4px;
+    margin: 4px 0 4px 4px;
+    user-select: none;
+    text-transform: capitalize;
+    font-weight: 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 {
+      display: none;
+    }
+
+    &:hover,
+    &[data-selected='true'] {
+      background: var(--c--theme--colors--greyscale-100);
+      .show-right-on-focus {
+        display: inherit;
+      }
+    }
+
+    &[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--sm) var(--c--theme--spacings--sm)
+      var(--c--theme--spacings--sm);
+  
+    flex:1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    transition: 100ms ease;
+    transition-property: height;
+  }
+
+  [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--base);
+  }
+
+  [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/separators/HorizontalSeparator.tsx

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

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

@@ -0,0 +1,32 @@
+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`
+        padding: ${spacings['base']} 0;
+        ${showSeparator &&
+        css`
+          border-bottom: 1px solid ${colors?.['greyscale-200']};
+        `}
+      `}
+    >
+      {children}
+    </Box>
+  );
+};

src/frontend/apps/impress/src/core/AppProvider.tsx

@@ -7,6 +7,7 @@ import '@/i18n/initI18n';
 import { useResponsiveStore } from '@/stores/';
 
 import { Auth } from './auth/';
+import { ConfigProvider } from './config/';
 
 /**
  * QueryClient:
@@ -39,7 +40,9 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
   return (
     <QueryClientProvider client={queryClient}>
       <CunninghamProvider theme={theme}>
-        <Auth>{children}</Auth>
+        <ConfigProvider>
+          <Auth>{children}</Auth>
+        </ConfigProvider>
       </CunninghamProvider>
     </QueryClientProvider>
   );

src/frontend/apps/impress/src/core/auth/__tests__/useAuthStore.test.tsx

@@ -0,0 +1,40 @@
+import { Crisp } from 'crisp-sdk-web';
+import fetchMock from 'fetch-mock';
+
+import { useAuthStore } from '../useAuthStore';
+
+jest.mock('crisp-sdk-web', () => ({
+  ...jest.requireActual('crisp-sdk-web'),
+  Crisp: {
+    isCrispInjected: jest.fn().mockReturnValue(true),
+    setTokenId: jest.fn(),
+    user: {
+      setEmail: jest.fn(),
+    },
+    session: {
+      reset: jest.fn(),
+    },
+  },
+}));
+
+describe('useAuthStore', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it('checks support session is terminated when logout', () => {
+    window.$crisp = true;
+    Object.defineProperty(window, 'location', {
+      value: {
+        ...window.location,
+        replace: jest.fn(),
+      },
+      writable: true,
+    });
+
+    useAuthStore.getState().logout();
+
+    expect(Crisp.session.reset).toHaveBeenCalled();
+  });
+});

src/frontend/apps/impress/src/core/auth/api/types.ts

@@ -8,4 +8,6 @@
 export interface User {
   id: string;
   email: string;
+  full_name: string;
+  short_name: string;
 }

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

@@ -1,6 +1,7 @@
 import { create } from 'zustand';
 
-import { baseApiUrl } from '@/core/conf';
+import { baseApiUrl } from '@/api';
+import { terminateCrispSession } from '@/services';
 
 import { User, getMe } from './api';
 import { PATH_AUTH_LOCAL_STORAGE } from './conf';
@@ -42,6 +43,7 @@ export const useAuthStore = create<AuthStore>((set, get) => ({
     window.location.replace(`${baseApiUrl()}authenticate/`);
   },
   logout: () => {
+    terminateCrispSession();
     window.location.replace(`${baseApiUrl()}logout/`);
   },
   // If we try to access a specific page and we are not authenticated

src/frontend/apps/impress/src/core/conf.ts

@@ -1,18 +0,0 @@
-export const mediaUrl = () =>
-  process.env.NEXT_PUBLIC_MEDIA_URL ||
-  (typeof window !== 'undefined' ? window.location.origin : '');
-
-export const backendUrl = () =>
-  process.env.NEXT_PUBLIC_API_ORIGIN ||
-  (typeof window !== 'undefined' ? window.location.origin : '');
-
-export const baseApiUrl = (apiVersion: string = '1.0') =>
-  `${backendUrl()}/api/v${apiVersion}/`;
-
-export const providerUrl = (docId: string) => {
-  const base =
-    process.env.NEXT_PUBLIC_Y_PROVIDER_URL ||
-    (typeof window !== 'undefined' ? `wss://${window.location.host}/ws` : '');
-
-  return `${base}/${docId}`;
-};

src/frontend/apps/impress/src/core/config/ConfigProvider.tsx

@@ -0,0 +1,49 @@
+import { Loader } from '@openfun/cunningham-react';
+import { PropsWithChildren, useEffect } from 'react';
+
+import { Box } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { configureCrispSession } from '@/services';
+import { useSentryStore } from '@/stores/useSentryStore';
+
+import { useConfig } from './api/useConfig';
+
+export const ConfigProvider = ({ children }: PropsWithChildren) => {
+  const { data: conf } = useConfig();
+  const { setSentry } = useSentryStore();
+  const { setTheme } = useCunninghamTheme();
+
+  useEffect(() => {
+    if (!conf?.SENTRY_DSN) {
+      return;
+    }
+
+    setSentry(conf.SENTRY_DSN, conf.ENVIRONMENT);
+  }, [conf?.SENTRY_DSN, conf?.ENVIRONMENT, setSentry]);
+
+  useEffect(() => {
+    if (!conf?.FRONTEND_THEME) {
+      return;
+    }
+
+    setTheme(conf.FRONTEND_THEME);
+  }, [conf?.FRONTEND_THEME, setTheme]);
+
+  useEffect(() => {
+    if (!conf?.CRISP_WEBSITE_ID) {
+      return;
+    }
+
+    configureCrispSession(conf.CRISP_WEBSITE_ID);
+  }, [conf?.CRISP_WEBSITE_ID]);
+
+  if (!conf) {
+    return (
+      <Box $height="100vh" $width="100vw" $align="center" $justify="center">
+        <Loader />
+      </Box>
+    );
+  }
+
+  return children;
+};

src/frontend/apps/impress/src/core/config/api/index.ts

@@ -0,0 +1 @@
+export * from './useConfig';

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

@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import { Theme } from '@/cunningham/';
+
+interface ConfigResponse {
+  LANGUAGES: [string, string][];
+  LANGUAGE_CODE: string;
+  ENVIRONMENT: string;
+  COLLABORATION_SERVER_URL?: string;
+  CRISP_WEBSITE_ID?: string;
+  FRONTEND_THEME?: Theme;
+  MEDIA_BASE_URL?: string;
+  SENTRY_DSN?: string;
+}
+
+export const getConfig = async (): Promise<ConfigResponse> => {
+  const response = await fetchAPI(`config/`);
+
+  if (!response.ok) {
+    throw new APIError('Failed to get the doc', await errorCauses(response));
+  }
+
+  return response.json() as Promise<ConfigResponse>;
+};
+
+export const KEY_CONFIG = 'config';
+
+export function useConfig() {
+  return useQuery<ConfigResponse, APIError, ConfigResponse>({
+    queryKey: [KEY_CONFIG],
+    queryFn: () => getConfig(),
+    staleTime: Infinity,
+  });
+}

src/frontend/apps/impress/src/core/config/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useMediaUrl';
+export * from './useCollaborationUrl';

src/frontend/apps/impress/src/core/config/hooks/useCollaborationUrl.tsx

@@ -0,0 +1,15 @@
+import { useConfig } from '../api';
+
+export const useCollaborationUrl = (room?: string) => {
+  const { data: conf } = useConfig();
+
+  if (!room) {
+    return;
+  }
+
+  const base =
+    conf?.COLLABORATION_SERVER_URL ||
+    (typeof window !== 'undefined' ? `wss://${window.location.host}/ws` : '');
+
+  return `${base}/${room}`;
+};

src/frontend/apps/impress/src/core/config/hooks/useMediaUrl.tsx

@@ -0,0 +1,10 @@
+import { useConfig } from '../api';
+
+export const useMediaUrl = () => {
+  const { data: conf } = useConfig();
+
+  return (
+    conf?.MEDIA_BASE_URL ||
+    (typeof window !== 'undefined' ? window.location.origin : '')
+  );
+};

src/frontend/apps/impress/src/core/config/index.ts

@@ -0,0 +1,3 @@
+export * from './api/';
+export * from './ConfigProvider';
+export * from './hooks';

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

@@ -1,3 +1,3 @@
 export * from './AppProvider';
 export * from './auth';
-export * from './conf';
+export * from './config';

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

@@ -1,12 +1,6 @@
-import useCunninghamTheme from '../useCunninghamTheme';
+import { useCunninghamTheme } from '../useCunninghamTheme';
 
 describe('<useCunninghamTheme />', () => {
-  it('has the theme from NEXT_PUBLIC_THEME', () => {
-    const { theme } = useCunninghamTheme.getState();
-
-    expect(theme).toBe('test-theme');
-  });
-
   it('has the dsfr logo correctly set', () => {
     const { themeTokens, setTheme } = useCunninghamTheme.getState();
     setTheme('dsfr');

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

@@ -16,6 +16,12 @@
   line-height: initial;
 }
 
+.c__field .c__field__footer {
+  padding: 2px 0 0;
+  font-size: var(--c--components--forms-field--footer-font-size);
+  color: var(--c--components--forms-field--footer-color);
+}
+
 .labelled-box label {
   color: var(--c--theme--colors--primary-text);
 }
@@ -328,6 +334,10 @@ input:-webkit-autofill:focus {
   cursor: not-allowed;
 }
 
+.c__checkbox.c__checkbox--disabled .c__checkbox__label {
+  color: var(--c--theme--colors--greyscale-400);
+}
+
 /**
  * Button
 */
@@ -341,6 +351,11 @@ input:-webkit-autofill:focus {
   background-color: transparent;
 }
 
+.c__button--nano {
+  padding: 0 var(--c--theme--spacings--2xs);
+  gap: var(--c--theme--spacings--2xs);
+}
+
 .c__button--medium {
   padding: 0.9rem var(--c--theme--spacings--s);
 }
@@ -432,6 +447,7 @@ 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;
 }
@@ -444,6 +460,13 @@ 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
@@ -509,6 +532,12 @@ input:-webkit-autofill:focus {
   overflow-y: auto;
 }
 
+.c__modal__title {
+  padding: 0;
+  font-size: 1.125rem;
+  margin-bottom: var(--c--theme--spacings--sm);
+}
+
 @media screen and (width <= 420px) {
   .c__modal__scroller {
     padding: 0.7rem;
@@ -532,3 +561,10 @@ input:-webkit-autofill:focus {
 .c__toast__container {
   z-index: 10000;
 }
+
+/**
+ * Tooltip
+*/
+.c__tooltip {
+  padding: 4px 6px;
+}

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': '#FFFFFF',
+          'info-text': '#fff',
           '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': '#FFFFFF',
+          'greyscale-000': '#fff',
           'primary-100': '#EDF5FA',
           'primary-200': '#8CB5EA',
           'primary-300': '#5894E1',
@@ -69,28 +69,65 @@ export const tokens = {
           'danger-700': '#9B0000',
           'danger-800': '#780000',
           'danger-900': '#5C0000',
-          'primary-text': '#FFFFFF',
-          'success-text': '#FFFFFF',
-          'warning-text': '#FFFFFF',
-          'danger-text': '#FFFFFF',
+          'primary-text': '#fff',
+          'success-text': '#fff',
+          'warning-text': '#fff',
+          'danger-text': '#fff',
           '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: '2.2rem',
-            h2: '1.7rem',
-            h3: '1.37rem',
-            h4: '1.15rem',
-            h5: '1rem',
-            h6: '0.87rem',
+            h1: '2rem',
+            h2: '1.75rem',
+            h3: '1.5rem',
+            h4: '1.375rem',
+            h5: '1.25rem',
+            h6: '1.125rem',
             l: '1rem',
             m: '0.8125rem',
             s: '0.75rem',
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.125rem',
             ml: '0.938rem',
-            xl: '1.50rem',
+            xl: '1.25rem',
             t: '0.6875rem',
           },
           weights: {
@@ -120,7 +157,7 @@ export const tokens = {
         },
         spacings: {
           '0': '0',
-          xl: '4rem',
+          xl: '2.5rem',
           l: '3rem',
           b: '1.625rem',
           s: '1rem',
@@ -130,6 +167,20 @@ 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)',
@@ -202,7 +253,7 @@ export const tokens = {
             focus: 'var(--c--components--forms-select--border-radius)',
           },
           'font-size': 'var(--c--theme--font--sizes--ml)',
-          'menu-background-color': '#ffffff',
+          'menu-background-color': '#fff',
           'item-background-color': {
             hover: 'var(--c--theme--colors--primary-300)',
           },
@@ -223,7 +274,7 @@ export const tokens = {
             'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
           },
         },
-        modal: { 'background-color': '#ffffff' },
+        modal: { 'background-color': '#fff' },
         button: {
           'border-radius': {
             active: 'var(--c--components--button--border-radius)',
@@ -270,7 +321,9 @@ export const tokens = {
             color: 'var(--c--theme--colors--primary-text)',
             'color-disabled': 'var(--c--theme--colors--greyscale-600)',
             background: {
-              'color-hover': 'var(--c--theme--colors--primary-100)',
+              color: 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--primary-300)',
+              'color-active': 'var(--c--theme--colors--primary-100)',
               'color-disabled': 'var(--c--theme--colors--greyscale-200)',
             },
           },
@@ -334,19 +387,19 @@ export const tokens = {
     dsfr: {
       theme: {
         colors: {
-          'card-border': '#ededed',
+          'card-border': '#E5E5E5',
           'primary-text': '#000091',
-          'primary-100': '#f5f5fe',
+          'primary-100': '#ECECFE',
           'primary-150': '#F4F4FD',
-          'primary-200': '#ececfe',
-          'primary-300': '#e3e3fd',
-          'primary-400': '#cacafb',
-          'primary-500': '#6a6af4',
-          'primary-600': '#000091',
+          'primary-200': '#E3E3FD',
+          'primary-300': '#CACAFB',
+          'primary-400': '#8585F6',
+          'primary-500': '#6A6AF4',
+          'primary-600': '#313178',
           'primary-700': '#272747',
-          'primary-800': '#21213f',
-          'primary-900': '#1c1a36',
-          'secondary-text': '#FFFFFF',
+          'primary-800': '#000091',
+          'primary-900': '#21213F',
+          'secondary-text': '#fff',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -357,16 +410,22 @@ export const tokens = {
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
           'greyscale-text': '#303C4B',
-          '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',
+          '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',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -427,9 +486,9 @@ export const tokens = {
               'color-hover': '#1212ff',
               'color-active': '#2323ff',
             },
-            color: '#ffffff',
-            'color-hover': '#ffffff',
-            'color-active': '#ffffff',
+            color: '#fff',
+            'color-hover': '#fff',
+            'color-active': '#fff',
           },
           'primary-text': {
             background: {
@@ -479,10 +538,14 @@ export const tokens = {
         },
         'forms-datepicker': { 'border-radius': '0' },
         'forms-fileuploader': { 'border-radius': '0' },
-        'forms-field': { color: 'var(--c--theme--colors--primary-text)' },
+        'forms-field': {
+          color: 'var(--c--theme--colors--primary-text)',
+          'footer-font-size': 'var(--c--theme--font--sizes--t)',
+          'footer-color': 'var(--c--theme--colors--greyscale-text)',
+        },
         'forms-input': {
           'border-radius': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           '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)',
@@ -491,11 +554,14 @@ export const tokens = {
         'forms-labelledbox': {
           'label-color': { big: 'var(--c--theme--colors--primary-text)' },
         },
+        'forms-radio': {
+          'accent-color': 'var(--c--theme--colors--primary-600)',
+        },
         'forms-select': {
           'item-font-size': '14px',
           'border-radius': '4px',
           'border-radius-hover': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           '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/index.ts

@@ -1,4 +1,2 @@
-import { tokens } from './cunningham-tokens';
-import useCunninghamTheme from './useCunninghamTheme';
-
-export { tokens, useCunninghamTheme };
+export * from './cunningham-tokens';
+export * from './useCunninghamTheme';

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

@@ -5,30 +5,37 @@ 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'];
-type Theme = 'default' | 'dsfr';
+export type Theme = keyof typeof tokens.themes;
 
 interface AuthStore {
-  theme: Theme;
+  theme: string;
   setTheme: (theme: Theme) => void;
   themeTokens: () => Partial<Tokens['theme']>;
   colorsTokens: () => Partial<ColorsTokens>;
+  fontSizesTokens: () => Partial<FontSizesTokens>;
+  spacingsTokens: () => Partial<SpacingsTokens>;
   componentTokens: () => ComponentTokens;
 }
 
-const useCunninghamTheme = create<AuthStore>((set, get) => {
+export const useCunninghamTheme = create<AuthStore>((set, get) => {
   const currentTheme = () =>
-    merge(tokens.themes['default'], tokens.themes[get().theme]) as Tokens;
+    merge(
+      tokens.themes['default'],
+      tokens.themes[get().theme as keyof typeof tokens.themes],
+    ) as Tokens;
 
   return {
-    theme: (process.env.NEXT_PUBLIC_THEME as Theme) || 'dsfr',
+    theme: 'dsfr',
     themeTokens: () => currentTheme().theme,
     colorsTokens: () => currentTheme().theme.colors,
     componentTokens: () => currentTheme().components,
+    spacingsTokens: () => currentTheme().theme.spacings,
+    fontSizesTokens: () => currentTheme().theme.font.sizes,
     setTheme: (theme: Theme) => {
       set({ theme });
     },
   };
 });
-
-export default useCunninghamTheme;

src/frontend/apps/impress/src/custom-next.d.ts

@@ -20,9 +20,6 @@ declare module '*.svg?url' {
 namespace NodeJS {
   interface ProcessEnv {
     NEXT_PUBLIC_API_ORIGIN?: string;
-    NEXT_PUBLIC_MEDIA_URL?: string;
-    NEXT_PUBLIC_Y_PROVIDER_URL?: string;
     NEXT_PUBLIC_SW_DEACTIVATED?: string;
-    NEXT_PUBLIC_THEME?: string;
   }
 }

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

@@ -9,26 +9,18 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import {
-  PropsWithChildren,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { PropsWithChildren, ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { isAPIError } from '@/api';
 import { Box, Text } from '@/components';
-import { useDocOptions } from '@/features/docs/doc-management/';
+import { useDocOptions, useDocStore } from '@/features/docs/doc-management/';
 
 import {
   AITransformActions,
   useDocAITransform,
   useDocAITranslate,
 } from '../api/';
-import { useDocStore } from '../stores';
 
 type LanguageTranslate = {
   value: string;
@@ -70,9 +62,8 @@ export function AIGroupButton() {
   const { t } = useTranslation();
   const { currentDoc } = useDocStore();
   const { data: docOptions } = useDocOptions();
-  const [languages, setLanguages] = useState<LanguageTranslate[]>([]);
 
-  useEffect(() => {
+  const languages = useMemo(() => {
     const languages = docOptions?.actions.POST.language.choices;
 
     if (!languages) {
@@ -90,7 +81,7 @@ export function AIGroupButton() {
       'pl',
     ]);
 
-    setLanguages(languages);
+    return languages;
   }, [docOptions?.actions.POST.language.choices]);
 
   const show = useMemo(() => {
@@ -220,45 +211,19 @@ const AIMenuItemTransform = ({
   children,
   icon,
 }: PropsWithChildren<AIMenuItemTransform>) => {
-  const editor = useBlockNoteEditor();
   const { mutateAsync: requestAI, isPending } = useDocAITransform();
-  const handleAIError = useHandleAIError();
 
-  const handleAIAction = useCallback(async () => {
-    const selectedBlocks = editor.getSelection()?.blocks;
-
-    if (!selectedBlocks || selectedBlocks.length === 0) {
-      return;
-    }
-
-    const markdown = await editor.blocksToMarkdownLossy(selectedBlocks);
-
-    try {
-      const responseAI = await requestAI({
-        text: markdown,
-        action,
-        docId,
-      });
-
-      if (!responseAI.answer) {
-        return;
-      }
-
-      const blockMarkdown = await editor.tryParseMarkdownToBlocks(
-        responseAI.answer,
-      );
-      editor.replaceBlocks(selectedBlocks, blockMarkdown);
-    } catch (error) {
-      handleAIError(error);
-    }
-  }, [editor, requestAI, action, docId, handleAIError]);
+  const requestAIAction = async (markdown: string) => {
+    const responseAI = await requestAI({
+      text: markdown,
+      action,
+      docId,
+    });
+    return responseAI.answer;
+  };
 
   return (
-    <AIMenuItem
-      icon={icon}
-      handleAIAction={handleAIAction}
-      isPending={isPending}
-    >
+    <AIMenuItem icon={icon} requestAI={requestAIAction} isPending={isPending}>
       {children}
     </AIMenuItem>
   );
@@ -276,11 +241,46 @@ const AIMenuItemTranslate = ({
   icon,
   language,
 }: PropsWithChildren<AIMenuItemTranslate>) => {
-  const editor = useBlockNoteEditor();
   const { mutateAsync: requestAI, isPending } = useDocAITranslate();
+
+  const requestAITranslate = async (markdown: string) => {
+    const responseAI = await requestAI({
+      text: markdown,
+      language,
+      docId,
+    });
+    return responseAI.answer;
+  };
+
+  return (
+    <AIMenuItem
+      icon={icon}
+      requestAI={requestAITranslate}
+      isPending={isPending}
+    >
+      {children}
+    </AIMenuItem>
+  );
+};
+
+interface AIMenuItemProps {
+  requestAI: (markdown: string) => Promise<string>;
+  isPending: boolean;
+  icon?: ReactNode;
+}
+
+const AIMenuItem = ({
+  requestAI,
+  isPending,
+  children,
+  icon,
+}: PropsWithChildren<AIMenuItemProps>) => {
+  const Components = useComponentsContext();
+
+  const editor = useBlockNoteEditor();
   const handleAIError = useHandleAIError();
 
-  const handleAIAction = useCallback(async () => {
+  const handleAIAction = async () => {
     const selectedBlocks = editor.getSelection()?.blocks;
 
     if (!selectedBlocks || selectedBlocks.length === 0) {
@@ -290,49 +290,18 @@ const AIMenuItemTranslate = ({
     const markdown = await editor.blocksToMarkdownLossy(selectedBlocks);
 
     try {
-      const responseAI = await requestAI({
-        text: markdown,
-        language,
-        docId,
-      });
+      const responseAI = await requestAI(markdown);
 
-      if (!responseAI.answer) {
+      if (!responseAI) {
         return;
       }
 
-      const blockMarkdown = await editor.tryParseMarkdownToBlocks(
-        responseAI.answer,
-      );
+      const blockMarkdown = await editor.tryParseMarkdownToBlocks(responseAI);
       editor.replaceBlocks(selectedBlocks, blockMarkdown);
     } catch (error) {
       handleAIError(error);
     }
-  }, [editor, requestAI, language, docId, handleAIError]);
-
-  return (
-    <AIMenuItem
-      icon={icon}
-      handleAIAction={handleAIAction}
-      isPending={isPending}
-    >
-      {children}
-    </AIMenuItem>
-  );
-};
-
-interface AIMenuItemProps {
-  handleAIAction: () => Promise<void>;
-  isPending: boolean;
-  icon?: ReactNode;
-}
-
-const AIMenuItem = ({
-  handleAIAction,
-  isPending,
-  children,
-  icon,
-}: PropsWithChildren<AIMenuItemProps>) => {
-  const Components = useComponentsContext();
+  };
 
   if (!Components) {
     return null;
@@ -359,26 +328,12 @@ const useHandleAIError = () => {
   const { toast } = useToastProvider();
   const { t } = useTranslation();
 
-  const handleAIError = useCallback(
-    (error: unknown) => {
-      if (isAPIError(error)) {
-        error.cause?.forEach((cause) => {
-          if (
-            cause === 'Request was throttled. Expected available in 60 seconds.'
-          ) {
-            toast(
-              t('Too many requests. Please wait 60 seconds.'),
-              VariantType.ERROR,
-            );
-          }
-        });
-      }
+  return (error: unknown) => {
+    if (isAPIError(error) && error.status === 429) {
+      toast(t('Too many requests. Please wait 60 seconds.'), VariantType.ERROR);
+      return;
+    }
 
-      toast(t('AI seems busy! Please try again.'), VariantType.ERROR);
-      console.error(error);
-    },
-    [toast, t],
-  );
-
-  return handleAIError;
+    toast(t('AI seems busy! Please try again.'), VariantType.ERROR);
+  };
 };

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

@@ -1,19 +1,21 @@
-import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
+import { Dictionary, locales } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
+import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import { t } from 'i18next';
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Box, TextErrors } from '@/components';
-import { mediaUrl } from '@/core';
 import { useAuthStore } from '@/core/auth';
+import { useMediaUrl } from '@/core/config';
 import { Doc } from '@/features/docs/doc-management';
-import { Version } from '@/features/docs/doc-versioning/';
 
 import { useCreateDocAttachment } from '../api/useCreateDocUpload';
 import useSaveDoc from '../hook/useSaveDoc';
-import { useDocStore, useHeadingStore } from '../stores';
+import { useEditorStore, useHeadingStore } from '../stores';
 import { randomColor } from '../utils';
 
 import { BlockNoteToolbar } from './BlockNoteToolbar';
@@ -24,7 +26,13 @@ const cssEditor = (readonly: boolean) => `
   };
   & .bn-editor {
     padding-right: 30px;
-    ${readonly && `padding-left: 30px;`}
+    ${
+      readonly &&
+      `
+        padding-left: 30px;
+        pointer-events: none;
+      `
+    }
   };
   & .collaboration-cursor__caret.ProseMirror-widget{
     word-wrap: initial;
@@ -66,53 +74,31 @@ const cssEditor = (readonly: boolean) => `
 `;
 
 interface BlockNoteEditorProps {
-  doc: Doc;
-  version?: Version;
-}
-
-export const BlockNoteEditor = ({ doc, version }: BlockNoteEditorProps) => {
-  const { createProvider, docsStore } = useDocStore();
-  const storeId = version?.id || doc.id;
-  const initialContent = version?.content || doc.content;
-  const provider = docsStore?.[storeId]?.provider;
-
-  useEffect(() => {
-    if (!provider || provider.document.guid !== storeId) {
-      createProvider(storeId, initialContent);
-    }
-  }, [createProvider, initialContent, provider, storeId]);
-
-  if (!provider) {
-    return null;
-  }
-
-  return <BlockNoteContent doc={doc} provider={provider} storeId={storeId} />;
-};
-
-interface BlockNoteContentProps {
   doc: Doc;
   provider: HocuspocusProvider;
   storeId: string;
 }
 
-export const BlockNoteContent = ({
+export const BlockNoteEditor = ({
   doc,
   provider,
   storeId,
-}: BlockNoteContentProps) => {
+}: BlockNoteEditorProps) => {
   const isVersion = doc.id !== storeId;
   const { userData } = useAuthStore();
-  const { setStore, docsStore } = useDocStore();
+  const { setEditor } = useEditorStore();
+  const mediaUrl = useMediaUrl();
 
   const readOnly = !doc.abilities.partial_update || isVersion;
   useSaveDoc(doc.id, provider.document, !readOnly);
-  const storedEditor = docsStore?.[storeId]?.editor;
   const {
     mutateAsync: createDocAttachment,
     isError: isErrorAttachment,
     error: errorAttachment,
   } = useCreateDocAttachment();
   const { setHeadings, resetHeadings } = useHeadingStore();
+  const { i18n } = useTranslation();
+  const lang = i18n.language;
 
   const uploadFile = useCallback(
     async (file: File) => {
@@ -124,32 +110,34 @@ export const BlockNoteContent = ({
         body,
       });
 
-      return `${mediaUrl()}${ret.file}`;
+      return `${mediaUrl}${ret.file}`;
     },
-    [createDocAttachment, doc.id],
+    [createDocAttachment, doc.id, mediaUrl],
   );
 
-  const editor = useMemo(() => {
-    if (storedEditor) {
-      return storedEditor;
-    }
-
-    return BlockNoteEditorCore.create({
+  const editor = useCreateBlockNote(
+    {
       collaboration: {
         provider,
         fragment: provider.document.getXmlFragment('document-store'),
         user: {
-          name: userData?.email || 'Anonymous',
+          name: userData?.full_name || userData?.email || t('Anonymous'),
           color: randomColor(),
         },
       },
+      dictionary: locales[lang as keyof typeof locales] as Dictionary,
       uploadFile,
-    });
-  }, [provider, storedEditor, uploadFile, userData?.email]);
+    },
+    [lang, provider, uploadFile, userData?.email, userData?.full_name],
+  );
 
   useEffect(() => {
-    setStore(storeId, { editor });
-  }, [setStore, storeId, editor]);
+    setEditor(editor);
+
+    return () => {
+      setEditor(undefined);
+    };
+  }, [setEditor, editor]);
 
   useEffect(() => {
     setHeadings(editor);