✨(app-impress) can duplicate template

Template with mode "is_public" are not editable, except
for the owner. We give the possibility to duplicate a
template, so that the user can edit the new one.

src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts

@@ -136,4 +136,39 @@ test.describe('Template Editor', () => {
       page.getByText('The {{body}} tag is necessary to works with the pads.'),
     ).toBeHidden();
   });
+
+  test('it duplicates the template', async ({ page, browserName }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName !== 'chromium',
+      'This test failed with safary because of the dragNdrop',
+    );
+
+    const randomTemplate = await createTemplate(
+      page,
+      'template-duplicate',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible();
+
+    const iframe = page.frameLocator('iFrame.gjs-frame');
+
+    await page.getByTitle('Open Blocks').click();
+    await page
+      .locator('.gjs-editor .gjs-block[title="Text"]')
+      .dragTo(iframe.locator('body.gjs-dashed'));
+
+    await iframe.getByText('Insert your text here').fill('Hello World');
+    await iframe.locator('body.gjs-dashed').click();
+
+    await page.getByText('Duplicate template').click();
+
+    await expect(
+      page.getByText('Template duplicated successfully'),
+    ).toBeVisible();
+    const panel = page.getByLabel('Templates panel').first();
+    await expect(panel.getByText(`${randomTemplate[0]} - Copy`)).toBeVisible();
+  });
 });

src/frontend/apps/impress/src/features/templates/template-create/api/index.ts

@@ -0,0 +1 @@
+export * from './useCreateTemplate';

src/frontend/apps/impress/src/features/templates/template-create/api/useCreateTemplate.tsx

@@ -3,21 +3,14 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { KEY_LIST_TEMPLATE, Template } from '@/features/templates';
 
-type CreateTemplateParam = {
-  title: string;
-  is_public: boolean;
-};
+type CreateTemplateParam = Partial<Template>;
 
-export const createTemplate = async ({
-  title,
-  is_public,
-}: CreateTemplateParam): Promise<Template> => {
+export const createTemplate = async (
+  props: CreateTemplateParam,
+): Promise<Template> => {
   const response = await fetchAPI(`templates/`, {
     method: 'POST',
-    body: JSON.stringify({
-      title,
-      is_public,
-    }),
+    body: JSON.stringify(props),
   });
 
   if (!response.ok) {

src/frontend/apps/impress/src/features/templates/template-create/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './api';

src/frontend/apps/impress/src/features/templates/template/components/TemplateTools.tsx

@@ -6,6 +6,7 @@ import {
 import { useTranslation } from 'react-i18next';
 
 import { Box, Text } from '@/components';
+import { useCreateTemplate } from '@/features/templates/template-create';
 
 import { useUpdateTemplate } from '../api/useUpdateTemplate';
 import { Template } from '../types';
@@ -29,6 +30,12 @@ export const TemplateTools = ({
     },
   });
 
+  const { mutate: duplicateTemplate } = useCreateTemplate({
+    onSuccess: () => {
+      toast(t('Template duplicated successfully'), VariantType.SUCCESS);
+    },
+  });
+
   return (
     <Box
       className="m-b mb-t mt-t"
@@ -39,18 +46,33 @@ export const TemplateTools = ({
       <Text as="h2" $align="center">
         {template.title}
       </Text>
-      <Button
-        onClick={() => {
-          updateTemplate({
-            id: template.id,
-            css: cssStyle,
-            html,
-          });
-        }}
-        disabled={!template.abilities.partial_update}
-      >
-        {t('Save template')}
-      </Button>
+      <Box $direction="row" $gap="2rem">
+        <Button
+          onClick={() => {
+            duplicateTemplate({
+              title: `${template.title} - ${t('Copy')}`,
+              code_editor: template.code_editor,
+              css: template.css,
+              code: template.code,
+            });
+          }}
+          color="secondary"
+        >
+          {t('Duplicate template')}
+        </Button>
+        <Button
+          onClick={() => {
+            updateTemplate({
+              id: template.id,
+              css: cssStyle,
+              html,
+            });
+          }}
+          disabled={!template.abilities.partial_update}
+        >
+          {t('Save template')}
+        </Button>
+      </Box>
     </Box>
   );
 };

src/frontend/apps/impress/src/features/templates/template/types.tsx

@@ -32,4 +32,7 @@ export interface Template {
   accesses: Access[];
   code_editor: ProjectData;
   title: string;
+  is_public: boolean;
+  css: string;
+  code: string;
 }