🚩(frontend) add feature flag on "Copy as HTML"

As a blue print, we add a feature flag on
"Copy as HTML" button in the doc toolbox.
This feature flag is controlled by the `CopyAsHtml`
feature flag.

Be aware:
- if the feature flag is disabled, the button
will be shown
- if the feature flag is enabled and send true,
the button will be shown
- if the feature flag is enabled and send false,
the button will be hidden

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to
 
 ## Added
 
+- 🚩(frontend) feature flag analytic on copy as html #649
 - ✨(frontend) Custom block divider with export #698
 
 ## Changed

src/frontend/apps/impress/jest.config.ts

@@ -23,6 +23,7 @@ const jestConfig = async () => {
       '\\.svg$': '<rootDir>/jest/mocks/svg.js',
       '^.+\\.svg\\?url$': `<rootDir>/jest/mocks/fileMock.js`,
       BlockNoteEditor: `<rootDir>/jest/mocks/ComponentMock.js`,
+      'custom-blocks': `<rootDir>/jest/mocks/ComponentMock.js`,
       ...nextJestConfig.moduleNameMapper,
     },
   };

src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBox.spec.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React, { Fragment } from 'react';
+
+import { AbstractAnalytic, Analytics } from '@/libs';
+import { AppWrapper } from '@/tests/utils';
+
+import { DocToolBox } from '../components/DocToolBox';
+
+let flag = true;
+class TestAnalytic extends AbstractAnalytic {
+  public constructor() {
+    super();
+  }
+
+  public Provider() {
+    return <Fragment />;
+  }
+
+  public trackEvent() {}
+
+  public isFeatureFlagActivated(flagName: string): boolean {
+    if (flagName === 'CopyAsHTML') {
+      return flag;
+    }
+
+    return true;
+  }
+}
+
+jest.mock('@/features/docs/doc-export/', () => ({
+  ModalExport: () => <span>ModalExport</span>,
+}));
+
+const doc = {
+  nb_accesses: 1,
+  abilities: {
+    versions_list: true,
+    destroy: true,
+  },
+};
+
+beforeEach(() => {
+  Analytics.clearAnalytics();
+});
+
+describe('DocToolBox "Copy as HTML" option', () => {
+  test('renders "Copy as HTML" option when feature flag is enabled', async () => {
+    new TestAnalytic();
+
+    render(<DocToolBox doc={doc as any} />, {
+      wrapper: AppWrapper,
+    });
+    const optionsButton = screen.getByLabelText('Open the document options');
+    await userEvent.click(optionsButton);
+    expect(await screen.findByText('Copy as HTML')).toBeInTheDocument();
+  });
+
+  test('does not render "Copy as HTML" option when feature flag is disabled', async () => {
+    flag = false;
+    new TestAnalytic();
+
+    render(<DocToolBox doc={doc as any} />, {
+      wrapper: AppWrapper,
+    });
+    const optionsButton = screen.getByLabelText('Open the document options');
+    await userEvent.click(optionsButton);
+    expect(screen.queryByText('Copy as HTML')).not.toBeInTheDocument();
+  });
+
+  test('render "Copy as HTML" option when we did not add analytics', async () => {
+    render(<DocToolBox doc={doc as any} />, {
+      wrapper: AppWrapper,
+    });
+    const optionsButton = screen.getByLabelText('Open the document options');
+    await userEvent.click(optionsButton);
+    expect(screen.getByText('Copy as HTML')).toBeInTheDocument();
+  });
+});

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -29,6 +29,7 @@ import {
   KEY_LIST_DOC_VERSIONS,
   ModalSelectVersion,
 } from '@/features/docs/doc-versioning';
+import { useAnalytics } from '@/libs';
 import { useResponsiveStore } from '@/stores';
 
 interface DocToolBoxProps {
@@ -54,6 +55,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { editor } = useEditorStore();
   const { toast } = useToastProvider();
   const copyDocLink = useCopyDocLink(doc.id);
+  const { isFeatureFlagActivated } = useAnalytics();
 
   const options: DropdownMenuOption[] = [
     ...(isSmallMobile
@@ -101,6 +103,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       callback: () => {
         void copyCurrentEditorToClipboard('html');
       },
+      show: isFeatureFlagActivated('CopyAsHTML'),
     },
     {
       label: t('Delete document'),