🏷️(frontend) add commenter type

Our document got new types:
- user can be commenters, commenters can view and
add comments to documents but cannot edit the
document content itself.
- document can be in 'commenters' mode, allowing
viewers to add comments.

Author: AntoLC

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

@@ -1,8 +1,13 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, getOtherBrowserName } from './utils-common';
+import { createDoc, getOtherBrowserName, verifyDocName } from './utils-common';
 import { writeInEditor } from './utils-editor';
-import { addNewMember, connectOtherUserToDoc } from './utils-share';
+import {
+  addNewMember,
+  connectOtherUserToDoc,
+  updateRoleUser,
+  updateShareLink,
+} from './utils-share';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -177,4 +182,135 @@ test.describe('Doc Comments', () => {
       'rgba(0, 0, 0, 0)',
     );
   });
+
+  test('it checks the comments abilities', async ({ page, browserName }) => {
+    test.slow();
+
+    const [docTitle] = await createDoc(page, 'comment-doc', browserName, 1);
+
+    // We share the doc with another user
+    const otherBrowserName = getOtherBrowserName(browserName);
+
+    // Add a new member with editor role
+    await page.getByRole('button', { name: 'Share' }).click();
+    await addNewMember(page, 0, 'Editor', otherBrowserName);
+
+    await expect(
+      page
+        .getByRole('listbox', { name: 'Suggestions' })
+        .getByText(new RegExp(otherBrowserName)),
+    ).toBeVisible();
+
+    const urlCommentDoc = page.url();
+
+    const { otherPage, cleanup } = await connectOtherUserToDoc({
+      otherBrowserName,
+      docUrl: urlCommentDoc,
+      docTitle,
+    });
+
+    const otherEditor = await writeInEditor({
+      page: otherPage,
+      text: 'Hello, I can edit the document',
+    });
+    await expect(
+      otherEditor.getByText('Hello, I can edit the document'),
+    ).toBeVisible();
+    await otherEditor.getByText('Hello').selectText();
+    await otherPage.getByRole('button', { name: 'Comment' }).click();
+    const otherThread = otherPage.locator('.bn-thread');
+    await otherThread
+      .getByRole('paragraph')
+      .first()
+      .fill('I can add a comment');
+    await otherThread.locator('[data-test="save"]').click();
+    await expect(
+      otherThread.getByText('I can add a comment').first(),
+    ).toBeHidden();
+
+    await expect(otherEditor.getByText('Hello')).toHaveCSS(
+      'background-color',
+      'rgba(237, 180, 0, 0.4)',
+    );
+
+    // We change the role of the second user to commenter
+    updateRoleUser(page, 'Commenter', `user.test@${otherBrowserName}.test`);
+
+    // With the commenter role, the second user cannot edit the document
+    await otherPage.reload();
+    await verifyDocName(otherPage, docTitle);
+
+    const otherEditor2 = otherPage.locator('.ProseMirror');
+    await expect(otherEditor2).toHaveAttribute('contenteditable', 'false');
+
+    // With the commenter role, the second user can still add comments
+    await otherEditor.getByText('Hello').click();
+    await otherThread
+      .getByRole('paragraph')
+      .last()
+      .fill('This is a comment from the other user');
+    await otherThread.locator('[data-test="save"]').click();
+    await expect(
+      otherThread.getByText('This is a comment from the other user').first(),
+    ).toBeVisible();
+
+    // We change the role of the second user to reader
+    updateRoleUser(page, 'Reader', `user.test@${otherBrowserName}.test`);
+
+    // With the reader role, the second user cannot see comments
+    await otherPage.reload();
+    await verifyDocName(otherPage, docTitle);
+
+    await expect(otherEditor.getByText('Hello')).toHaveCSS(
+      'background-color',
+      'rgba(0, 0, 0, 0)',
+    );
+    await otherEditor.getByText('Hello').click();
+    await expect(otherThread).toBeHidden();
+    await otherEditor.getByText('Hello').selectText();
+    await expect(
+      otherPage.getByRole('button', { name: 'Comment' }),
+    ).toBeHidden();
+
+    await otherPage.reload();
+
+    // Change the link role of the doc to set it in commenting mode
+    updateShareLink(page, 'Public', 'Commenting');
+
+    // Anonymous user can see and add comments
+    await otherPage.getByRole('button', { name: 'Logout' }).click();
+
+    await otherPage.goto(urlCommentDoc);
+
+    await verifyDocName(otherPage, docTitle);
+
+    await expect(otherEditor.getByText('Hello')).toHaveCSS(
+      'background-color',
+      'rgba(237, 180, 0, 0.4)',
+    );
+    await otherEditor.getByText('Hello').click();
+    await expect(
+      otherThread.getByText('This is a comment from the other user').first(),
+    ).toBeVisible();
+
+    await otherThread
+      .locator('.ProseMirror.bn-editor[contenteditable="true"]')
+      .getByRole('paragraph')
+      .first()
+      .fill('Comment by anonymous user');
+    await otherThread.locator('[data-test="save"]').click();
+
+    await expect(
+      otherThread.getByText('Comment by anonymous user').first(),
+    ).toBeVisible();
+
+    await expect(
+      otherThread.getByRole('img', { name: `Anonymous` }).first(),
+    ).toBeVisible();
+
+    await otherThread.getByText('Comment by anonymous user').first().hover();
+    await expect(otherThread.locator('[data-test="moreactions"]')).toBeHidden();
+
+    await cleanup();
+  });
 });

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

@@ -132,7 +132,9 @@ export const verifyDocName = async (page: Page, docName: string) => {
   try {
     await expect(
       page.getByRole('textbox', { name: 'Document title' }),
-    ).toContainText(docName);
+    ).toContainText(docName, {
+      timeout: 1000,
+    });
   } catch {
     await expect(page.getByRole('heading', { name: docName })).toBeVisible();
   }

src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts

@@ -7,14 +7,20 @@ import {
   verifyDocName,
 } from './utils-common';
 
-export type Role = 'Administrator' | 'Owner' | 'Member' | 'Editor' | 'Reader';
+export type Role =
+  | 'Administrator'
+  | 'Owner'
+  | 'Member'
+  | 'Editor'
+  | 'Reader'
+  | 'Commenter';
 export type LinkReach = 'Private' | 'Connected' | 'Public';
-export type LinkRole = 'Reading' | 'Edition';
+export type LinkRole = 'Reading' | 'Edition' | 'Commenting';
 
 export const addNewMember = async (
   page: Page,
   index: number,
-  role: 'Administrator' | 'Owner' | 'Editor' | 'Reader',
+  role: Role,
   fillText: string = 'user.test',
 ) => {
   const responsePromiseSearchUser = page.waitForResponse(

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

@@ -7,6 +7,7 @@ export const useTrans = () => {
 
   const translatedRoles = {
     [Role.READER]: t('Reader'),
+    [Role.COMMENTER]: t('Commenter'),
     [Role.EDITOR]: t('Editor'),
     [Role.ADMIN]: t('Administrator'),
     [Role.OWNER]: t('Owner'),

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

@@ -23,6 +23,7 @@ export interface Access {
 
 export enum Role {
   READER = 'reader',
+  COMMENTER = 'commenter',
   EDITOR = 'editor',
   ADMIN = 'administrator',
   OWNER = 'owner',
@@ -43,6 +44,7 @@ export enum LinkReach {
 
 export enum LinkRole {
   READER = 'reader',
+  COMMENTER = 'commenter',
   EDITOR = 'editor',
 }
 

src/frontend/apps/impress/src/features/docs/doc-share/hooks/useTranslatedShareSettings.tsx

@@ -13,6 +13,7 @@ export const useTranslatedShareSettings = () => {
 
   const linkModeTranslations = {
     [LinkRole.READER]: t('Reading'),
+    [LinkRole.COMMENTER]: t('Commenting'),
     [LinkRole.EDITOR]: t('Editing'),
   };
 

src/frontend/apps/impress/src/features/service-worker/plugins/ApiPlugin.ts

@@ -187,6 +187,7 @@ export class ApiPlugin implements WorkboxPlugin {
         children_create: true,
         children_list: true,
         collaboration_auth: true,
+        comment: true,
         destroy: true,
         duplicate: true,
         favorite: true,