🏷️(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

@@ -6,7 +6,7 @@ import {
   keyCloakSignIn,
   verifyDocName,
 } from './utils-common';
-import { addNewMember } from './utils-share';
+import { addNewMember, updateRoleUser, updateShareLink } from './utils-share';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -125,6 +125,10 @@ test.describe('Doc Comments', () => {
     await expect(
       thread.getByText(`E2E ${otherBrowserName}`).first(),
     ).toBeVisible();
+
+    await otherPage.close();
+    await otherContext.close();
+    await otherBrowser.close();
   });
 
   test('it checks the comments interactions', async ({ page, browserName }) => {
@@ -195,4 +199,130 @@ 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 = BROWSERS.find((b) => b !== browserName);
+    if (!otherBrowserName) {
+      throw new Error('No alternative browser found');
+    }
+
+    // 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();
+
+    // We open another browser with another user
+    const otherBrowser = await chromium.launch({ headless: true });
+    const otherContext = await otherBrowser.newContext({
+      locale: 'en-US',
+      timezoneId: 'Europe/Paris',
+      permissions: [],
+      storageState: {
+        cookies: [],
+        origins: [],
+      },
+    });
+    const otherPage = await otherContext.newPage();
+    await otherPage.goto(urlCommentDoc);
+
+    await otherPage.getByRole('button', { name: 'Login' }).click({
+      timeout: 15000,
+    });
+
+    await keyCloakSignIn(otherPage, otherBrowserName, false);
+
+    await verifyDocName(otherPage, docTitle);
+
+    const otherEditor = otherPage.locator('.ProseMirror');
+    await otherEditor.fill('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(otherEditor.getByText('Hello')).toHaveCSS(
+      'background-color',
+      'rgb(244, 210, 97)',
+    );
+
+    // 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, 'Connected', 'Commenting');
+
+    // The second user with reader role can now see and add comments
+    await otherPage.reload();
+    await verifyDocName(otherPage, docTitle);
+
+    await expect(otherEditor.getByText('Hello')).toHaveCSS(
+      'background-color',
+      'rgb(244, 210, 97)',
+    );
+    await otherEditor.getByText('Hello').click();
+    await expect(
+      otherThread.getByText('This is a comment from the other user').first(),
+    ).toBeVisible();
+
+    await otherPage.close();
+    await otherContext.close();
+    await otherBrowser.close();
+  });
 });

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',
 }
 
@@ -79,6 +81,7 @@ export interface Doc {
     children_create: boolean;
     children_list: boolean;
     collaboration_auth: boolean;
+    comment: true;
     destroy: boolean;
     duplicate: boolean;
     favorite: boolean;

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,