🛂(frontend) display the AI buttons depend abilities

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.
2025-02-11 10:26:16 +01:00
parent 91cf5f9367
commit d89e3dc6d4
5 changed files with 180 additions and 72 deletions
--- 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();
+      }
+    });
+  });
 });
--- 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}
-            >
-              <Box $direction="row" $gap="0.6rem">
+        {canAITransform && (
+          <>
+            <AIMenuItemTransform
+              action="prompt"
+              docId={currentDoc.id}
+              icon={
                <Text $isMaterialIcon $size="s">
-                  translate
+                  text_fields
                </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('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>
+          </>
+        )}
+        {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>
  );
--- 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} />
            ) : (
--- 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;
--- 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,