From ab4d4471cf3497196c61466ae95c37c46d7ca9f2 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Thu, 18 Apr 2024 17:29:25 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(app-impress)=20can=20duplicate=20temp?=
 =?UTF-8?q?late?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../app-impress/template-editor.spec.ts       | 35 +++++++++++++++
 .../templates/template-create/api/index.ts    |  1 +
 .../template-create/api/useCreateTemplate.tsx | 17 +++----
 .../templates/template-create/index.ts        |  1 +
 .../template/components/TemplateTools.tsx     | 44 ++++++++++++++-----
 .../src/features/templates/template/types.tsx |  3 ++
 6 files changed, 78 insertions(+), 23 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/features/templates/template-create/api/index.ts

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts
index da0fed690..0a8f95dc0 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts
+++ b/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();
+  });
 });
diff --git a/src/frontend/apps/impress/src/features/templates/template-create/api/index.ts b/src/frontend/apps/impress/src/features/templates/template-create/api/index.ts
new file mode 100644
index 000000000..f0040687f
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/templates/template-create/api/index.ts
@@ -0,0 +1 @@
+export * from './useCreateTemplate';
diff --git a/src/frontend/apps/impress/src/features/templates/template-create/api/useCreateTemplate.tsx b/src/frontend/apps/impress/src/features/templates/template-create/api/useCreateTemplate.tsx
index 57fc56f82..4bccc8ea3 100644
--- a/src/frontend/apps/impress/src/features/templates/template-create/api/useCreateTemplate.tsx
+++ b/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) {
diff --git a/src/frontend/apps/impress/src/features/templates/template-create/index.ts b/src/frontend/apps/impress/src/features/templates/template-create/index.ts
index 07635cbbc..3d5bec67d 100644
--- a/src/frontend/apps/impress/src/features/templates/template-create/index.ts
+++ b/src/frontend/apps/impress/src/features/templates/template-create/index.ts
@@ -1 +1,2 @@
 export * from './components';
+export * from './api';
diff --git a/src/frontend/apps/impress/src/features/templates/template/components/TemplateTools.tsx b/src/frontend/apps/impress/src/features/templates/template/components/TemplateTools.tsx
index ca57d8840..79914a0f0 100644
--- a/src/frontend/apps/impress/src/features/templates/template/components/TemplateTools.tsx
+++ b/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';
@@ -25,6 +26,12 @@ export const TemplateTools = ({ template, html, css }: TemplateToolsProps) => {
     },
   });
 
+  const { mutate: duplicateTemplate } = useCreateTemplate({
+    onSuccess: () => {
+      toast(t('Template duplicated successfully'), VariantType.SUCCESS);
+    },
+  });
+
   return (
     <Box
       className="m-b mb-t mt-t"
@@ -35,17 +42,32 @@ export const TemplateTools = ({ template, html, css }: TemplateToolsProps) => {
       <Text as="h2" $align="center">
         {template.title}
       </Text>
-      <Button
-        onClick={() => {
-          updateTemplate({
-            id: template.id,
-            css,
-            html,
-          });
-        }}
-      >
-        {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,
+              html,
+            });
+          }}
+        >
+          {t('Save template')}
+        </Button>
+      </Box>
     </Box>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/templates/template/types.tsx b/src/frontend/apps/impress/src/features/templates/template/types.tsx
index 3003d159b..41d7dad50 100644
--- a/src/frontend/apps/impress/src/features/templates/template/types.tsx
+++ b/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;
 }