🛂(frontend) display the AI buttons depend abilities

AntoLC · AntoLC · commit d89e3dc6d475 · 2025-02-11T10:54:55.000+01:00
Anybody with edit right could use the AI.
We changed this behavior, now we have to be
authentified with edit right.
We update the UI to display the AI buttons
only if the user has the correct AI ability.
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
@@ -1,3 +1,5 @@
+/* eslint-disable playwright/no-conditional-expect */
+/* eslint-disable playwright/no-conditional-in-test */
 import path from 'path';
 
 import { expect, test } from '@playwright/test';
@@ -368,4 +370,77 @@ test.describe('Doc Editor', () => {
 
     await expect(editor.getByText('Bonjour le monde')).toBeVisible();
   });
+
+  [
+    { ai_transform: false, ai_translate: false },
+    { ai_transform: true, ai_translate: false },
+    { ai_transform: false, ai_translate: true },
+  ].forEach(({ ai_transform, ai_translate }) => {
+    test(`it checks AI buttons when can transform is at "${ai_transform}" and can translate is at "${ai_translate}"`, async ({
+      page,
+    }) => {
+      await mockedDocument(page, {
+        accesses: [
+          {
+            id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg',
+            role: 'owner',
+            user: {
+              email: 'super@owner.com',
+              full_name: 'Super Owner',
+            },
+          },
+        ],
+        abilities: {
+          destroy: true, // Means owner
+          link_configuration: true,
+          ai_transform,
+          ai_translate,
+          accesses_manage: true,
+          accesses_view: true,
+          update: true,
+          partial_update: true,
+          retrieve: true,
+        },
+        link_reach: 'public',
+        link_role: 'editor',
+        created_at: '2021-09-01T09:00:00Z',
+      });
+
+      await goToGridDoc(page);
+
+      await verifyDocName(page, 'Mocked document');
+
+      await page.locator('.bn-block-outer').last().fill('Hello World');
+
+      const editor = page.locator('.ProseMirror');
+      await editor.getByText('Hello').dblclick();
+
+      if (!ai_transform && !ai_translate) {
+        await expect(page.getByRole('button', { name: 'AI' })).toBeHidden();
+        return;
+      }
+
+      await page.getByRole('button', { name: 'AI' }).click();
+
+      if (ai_transform) {
+        await expect(
+          page.getByRole('menuitem', { name: 'Use as prompt' }),
+        ).toBeVisible();
+      } else {
+        await expect(
+          page.getByRole('menuitem', { name: 'Use as prompt' }),
+        ).toBeHidden();
+      }
+
+      if (ai_translate) {
+        await expect(
+          page.getByRole('menuitem', { name: 'Language' }),
+        ).toBeVisible();
+      } else {
+        await expect(
+          page.getByRole('menuitem', { name: 'Language' }),
+        ).toBeHidden();
+      }
+    });
+  });
 });
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/AIButton.tsx
@@ -92,6 +92,13 @@ export function AIGroupButton() {
     return null;
   }
 
+  const canAITransform = currentDoc.abilities.ai_transform;
+  const canAITranslate = currentDoc.abilities.ai_translate;
+
+  if (!canAITransform && !canAITranslate) {
+    return null;
+  }
+
   return (
     <Components.Generic.Menu.Root>
       <Components.Generic.Menu.Trigger>
@@ -111,79 +118,85 @@ export function AIGroupButton() {
         className="bn-menu-dropdown bn-drag-handle-menu"
         sub={true}
       >
-        <AIMenuItemTransform
-          action="prompt"
-          docId={currentDoc.id}
-          icon={
-            <Text $isMaterialIcon $size="s">
-              text_fields
-            </Text>
-          }
-        >
-          {t('Use as prompt')}
-        </AIMenuItemTransform>
-        <AIMenuItemTransform
-          action="rephrase"
-          docId={currentDoc.id}
-          icon={
-            <Text $isMaterialIcon $size="s">
-              refresh
-            </Text>
-          }
-        >
-          {t('Rephrase')}
-        </AIMenuItemTransform>
-        <AIMenuItemTransform
-          action="summarize"
-          docId={currentDoc.id}
-          icon={
-            <Text $isMaterialIcon $size="s">
-              summarize
-            </Text>
-          }
-        >
-          {t('Summarize')}
-        </AIMenuItemTransform>
-        <AIMenuItemTransform
-          action="correct"
-          docId={currentDoc.id}
-          icon={
-            <Text $isMaterialIcon $size="s">
-              check
-            </Text>
-          }
-        >
-          {t('Correct')}
-        </AIMenuItemTransform>
-        <Components.Generic.Menu.Root position="right" sub={true}>
-          <Components.Generic.Menu.Trigger sub={false}>
-            <Components.Generic.Menu.Item
-              className="bn-menu-item"
-              subTrigger={true}
+        {canAITransform && (
+          <>
+            <AIMenuItemTransform
+              action="prompt"
+              docId={currentDoc.id}
+              icon={
+                <Text $isMaterialIcon $size="s">
+                  text_fields
+                </Text>
+              }
             >
-              <Box $direction="row" $gap="0.6rem">
+              {t('Use as prompt')}
+            </AIMenuItemTransform>
+            <AIMenuItemTransform
+              action="rephrase"
+              docId={currentDoc.id}
+              icon={
                 <Text $isMaterialIcon $size="s">
-                  translate
+                  refresh
                 </Text>
-                {t('Language')}
-              </Box>
-            </Components.Generic.Menu.Item>
-          </Components.Generic.Menu.Trigger>
-          <Components.Generic.Menu.Dropdown
-            sub={true}
-            className="bn-menu-dropdown"
-          >
-            {languages.map((language) => (
-              <AIMenuItemTranslate
-                key={language.value}
-                language={language.value}
-                docId={currentDoc.id}
+              }
+            >
+              {t('Rephrase')}
+            </AIMenuItemTransform>
+            <AIMenuItemTransform
+              action="summarize"
+              docId={currentDoc.id}
+              icon={
+                <Text $isMaterialIcon $size="s">
+                  summarize
+                </Text>
+              }
+            >
+              {t('Summarize')}
+            </AIMenuItemTransform>
+            <AIMenuItemTransform
+              action="correct"
+              docId={currentDoc.id}
+              icon={
+                <Text $isMaterialIcon $size="s">
+                  check
+                </Text>
+              }
+            >
+              {t('Correct')}
+            </AIMenuItemTransform>
+          </>
+        )}
+        {canAITranslate && (
+          <Components.Generic.Menu.Root position="right" sub={true}>
+            <Components.Generic.Menu.Trigger sub={false}>
+              <Components.Generic.Menu.Item
+                className="bn-menu-item"
+                subTrigger={true}
               >
-                {language.display_name}
-              </AIMenuItemTranslate>
-            ))}
-          </Components.Generic.Menu.Dropdown>
-        </Components.Generic.Menu.Root>
+                <Box $direction="row" $gap="0.6rem">
+                  <Text $isMaterialIcon $size="s">
+                    translate
+                  </Text>
+                  {t('Language')}
+                </Box>
+              </Components.Generic.Menu.Item>
+            </Components.Generic.Menu.Trigger>
+            <Components.Generic.Menu.Dropdown
+              sub={true}
+              className="bn-menu-dropdown"
+            >
+              {languages.map((language) => (
+                <AIMenuItemTranslate
+                  key={language.value}
+                  language={language.value}
+                  docId={currentDoc.id}
+                >
+                  {language.display_name}
+                </AIMenuItemTranslate>
+              ))}
+            </Components.Generic.Menu.Dropdown>
+          </Components.Generic.Menu.Root>
+        )}
       </Components.Generic.Menu.Dropdown>
     </Components.Generic.Menu.Root>
   );
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -65,7 +65,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           $css="overflow-x: clip; flex: 1;"
           $position="relative"
         >
-          <Box $css="flex:1;" $overflow="auto" $position="relative">
+          <Box $css="flex:1;" $position="relative">
             {isVersion ? (
               <DocVersionEditor docId={doc.id} versionId={versionId} />
             ) : (
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/types.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/types.tsx
@@ -48,10 +48,20 @@ export interface Doc {
   abilities: {
     accesses_manage: boolean;
     accesses_view: boolean;
-    attachment_upload: true;
+    ai_transform: boolean;
+    ai_translate: boolean;
+    attachment_upload: boolean;
+    children_create: boolean;
+    children_list: boolean;
+    collaboration_auth: boolean;
     destroy: boolean;
+    favorite: boolean;
+    invite_owner: boolean;
     link_configuration: boolean;
+    media_auth: boolean;
+    move: boolean;
     partial_update: boolean;
+    restore: boolean;
     retrieve: boolean;
     update: boolean;
     versions_destroy: boolean;
diff --git a/src/frontend/apps/impress/src/features/service-worker/ApiPlugin.ts b/src/frontend/apps/impress/src/features/service-worker/ApiPlugin.ts
@@ -195,10 +195,20 @@ export class ApiPlugin implements WorkboxPlugin {
       abilities: {
         accesses_manage: true,
         accesses_view: true,
+        ai_transform: true,
+        ai_translate: true,
         attachment_upload: true,
+        children_create: true,
+        children_list: true,
+        collaboration_auth: true,
         destroy: true,
+        favorite: true,
+        invite_owner: true,
         link_configuration: true,
+        media_auth: true,
+        move: true,
         partial_update: true,
+        restore: true,
         retrieve: true,
         update: true,
         versions_destroy: true,

Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {`
`65`	`65`	`$css="overflow-x: clip; flex: 1;"`
`66`	`66`	`$position="relative"`
`67`	`67`	`>`
`68`		`- <Box $css="flex:1;" $overflow="auto" $position="relative">`
	`68`	`+ <Box $css="flex:1;" $position="relative">`
`69`	`69`	`{isVersion ? (`
`70`	`70`	`<DocVersionEditor docId={doc.id} versionId={versionId} />`
`71`	`71`	`) : (`