From 4d2a73556a666aa0c4b0317b0541891831ffc201 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Tue, 1 Oct 2024 16:00:14 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5(frontend)=20remove=20useless=20upd?= =?UTF-8?q?ate=20title=20codes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We can now update the title directly in the header, so we don't need the update title modal anymore. We remove the buttons to trigger the modal and the modal itself. --- .../__tests__/app-impress/doc-grid.spec.ts | 26 +-- .../__tests__/app-impress/doc-header.spec.ts | 63 ++----- .../docs/doc-header/components/DocToolBox.tsx | 44 ++--- .../components/InputDocName.tsx | 54 ------ .../components/ModalCreateUpdateDoc.tsx | 176 ------------------ .../docs/doc-management/components/index.ts | 1 - .../docs-grid/components/DocsGridActions.tsx | 63 ++----- 7 files changed, 40 insertions(+), 387 deletions(-) delete mode 100644 src/frontend/apps/impress/src/features/docs/doc-management/components/InputDocName.tsx delete mode 100644 src/frontend/apps/impress/src/features/docs/doc-management/components/ModalCreateUpdateDoc.tsx diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts index 35eec8a3..c83ed044 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts @@ -212,26 +212,6 @@ test.describe('Documents Grid', () => { ).toHaveText(/.*/); }); - test('it updates document', async ({ page }) => { - const datagrid = page - .getByLabel('Datagrid of the documents page 1') - .getByRole('table'); - - const docRow = datagrid.getByRole('row').nth(1).getByRole('cell'); - - const docName = await docRow.nth(1).textContent(); - - await docRow.getByLabel('Open the document options').click(); - - await page.getByText('Update document').click(); - - await page.getByLabel('Document name').fill(`${docName} updated`); - - await page.getByText('Validate the modification').click(); - - await expect(datagrid.getByText(`${docName} updated`)).toBeVisible(); - }); - test('it deletes the document', async ({ page }) => { const datagrid = page .getByLabel('Datagrid of the documents page 1') @@ -241,11 +221,9 @@ test.describe('Documents Grid', () => { const docName = await docRow.nth(1).textContent(); - await docRow.getByLabel('Open the document options').click(); - - await page + await docRow .getByRole('button', { - name: 'Delete document', + name: 'Delete the document', }) .click(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts index 9d1a4d1b..208eeb7e 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts @@ -65,49 +65,15 @@ test.describe('Doc Header', () => { await expect(page.getByRole('button', { name: 'Share' })).toBeVisible(); }); - test('it updates the doc', async ({ page, browserName }) => { + test('it updates the title doc', async ({ page, browserName }) => { const [randomDoc] = await createDoc(page, 'doc-update', browserName, 1); - await expect(page.locator('h2').getByText(randomDoc)).toBeVisible(); - await page.getByLabel('Open the document options').click(); - await page - .getByRole('button', { - name: 'Update document', - }) - .click(); + await page.getByRole('heading', { name: randomDoc }).fill(' '); + await page.getByText('Created at ').click(); await expect( - page.locator('h2').getByText(`Update document "${randomDoc}"`), + page.getByRole('heading', { name: 'Untitled document' }), ).toBeVisible(); - - await page.getByText('Document name').fill(`${randomDoc}-updated`); - - await page - .getByRole('button', { - name: 'Validate the modification', - }) - .click(); - - await expect( - page.getByText('The document has been updated.'), - ).toBeVisible(); - - const docTitle = await goToGridDoc(page, { - title: `${randomDoc}-updated`, - }); - - await expect(page.locator('h2').getByText(docTitle)).toBeVisible(); - - await page.getByLabel('Open the document options').click(); - await page - .getByRole('button', { - name: 'Update document', - }) - .click(); - - await expect( - page.getByRole('textbox', { name: 'Document name' }), - ).toHaveValue(`${randomDoc}-updated`); }); test('it deletes the doc', async ({ page, browserName }) => { @@ -167,16 +133,15 @@ test.describe('Doc Header', () => { await goToGridDoc(page); - await expect(page.locator('h2').getByText('Mocked document')).toBeVisible(); + await expect( + page.locator('h2').getByText('Mocked document'), + ).toHaveAttribute('contenteditable'); await expect(page.getByRole('button', { name: 'Share' })).toBeVisible(); await page.getByLabel('Open the document options').click(); await expect(page.getByRole('button', { name: 'Export' })).toBeVisible(); - await expect( - page.getByRole('button', { name: 'Update document' }), - ).toBeVisible(); await expect( page.getByRole('button', { name: 'Delete document' }), ).toBeHidden(); @@ -199,16 +164,15 @@ test.describe('Doc Header', () => { await goToGridDoc(page); - await expect(page.locator('h2').getByText('Mocked document')).toBeVisible(); + await expect( + page.locator('h2').getByText('Mocked document'), + ).toHaveAttribute('contenteditable'); await expect(page.getByRole('button', { name: 'Share' })).toBeHidden(); await page.getByLabel('Open the document options').click(); await expect(page.getByRole('button', { name: 'Export' })).toBeVisible(); - await expect( - page.getByRole('button', { name: 'Update document' }), - ).toBeVisible(); await expect( page.getByRole('button', { name: 'Delete document' }), ).toBeHidden(); @@ -231,7 +195,9 @@ test.describe('Doc Header', () => { await goToGridDoc(page); - await expect(page.locator('h2').getByText('Mocked document')).toBeVisible(); + await expect( + page.locator('h2').getByText('Mocked document'), + ).not.toHaveAttribute('contenteditable'); await expect(page.getByRole('button', { name: 'Share' })).toBeHidden(); @@ -239,9 +205,6 @@ test.describe('Doc Header', () => { await expect(page.getByRole('button', { name: 'Share' })).toBeHidden(); await expect(page.getByRole('button', { name: 'Export' })).toBeVisible(); - await expect( - page.getByRole('button', { name: 'Update document' }), - ).toBeHidden(); await expect( page.getByRole('button', { name: 'Delete document' }), ).toBeHidden(); diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx index 5d70f5e8..398bf070 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx @@ -8,7 +8,6 @@ import { Doc, ModalRemoveDoc, ModalShare, - ModalUpdateDoc, } from '@/features/docs/doc-management'; import { ModalPDF } from './ModalExport'; @@ -20,7 +19,6 @@ interface DocToolBoxProps { export const DocToolBox = ({ doc }: DocToolBoxProps) => { const { t } = useTranslation(); const [isModalShareOpen, setIsModalShareOpen] = useState(false); - const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false); const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false); const [isModalPDFOpen, setIsModalPDFOpen] = useState(false); const [isDropOpen, setIsDropOpen] = useState(false); @@ -53,32 +51,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { isOpen={isDropOpen} > - {doc.abilities.partial_update && ( - - )} - {doc.abilities.destroy && ( - - )} {doc.abilities.versions_list && ( + {doc.abilities.destroy && ( + + )} {isModalShareOpen && ( @@ -124,9 +109,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { {isModalPDFOpen && ( setIsModalPDFOpen(false)} doc={doc} /> )} - {isModalUpdateOpen && ( - setIsModalUpdateOpen(false)} doc={doc} /> - )} {isModalRemoveOpen && ( setIsModalRemoveOpen(false)} doc={doc} /> )} diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/InputDocName.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/InputDocName.tsx deleted file mode 100644 index 7e1f58de..00000000 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/InputDocName.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Input, Loader } from '@openfun/cunningham-react'; -import { useEffect, useState } from 'react'; - -import { APIError } from '@/api'; -import { Box, TextErrors } from '@/components'; - -interface InputDocNameProps { - error: APIError | null; - isError: boolean; - isPending: boolean; - label: string; - setDocName: (newDocName: string) => void; - defaultValue?: string; -} - -export const InputDocName = ({ - defaultValue, - error, - isError, - isPending, - label, - setDocName, -}: InputDocNameProps) => { - const [isInputError, setIsInputError] = useState(isError); - - useEffect(() => { - if (isError) { - setIsInputError(true); - } - }, [isError]); - - return ( - <> - { - setDocName(e.target.value); - setIsInputError(false); - }} - rightIcon={edit} - state={isInputError ? 'error' : 'default'} - /> - {isError && error && } - {isPending && ( - - - - )} - - ); -}; diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalCreateUpdateDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalCreateUpdateDoc.tsx deleted file mode 100644 index c883715d..00000000 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalCreateUpdateDoc.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import { - Alert, - Button, - Modal, - ModalSize, - VariantType, - useToastProvider, -} from '@openfun/cunningham-react'; -import { UseMutationResult } from '@tanstack/react-query'; -import { useRouter } from 'next/navigation'; -import { useState } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { APIError } from '@/api'; -import { Box, Text } from '@/components'; -import useCunninghamTheme from '@/cunningham/useCunninghamTheme'; - -import { KEY_DOC, KEY_LIST_DOC } from '../api'; -import { useCreateDoc } from '../api/useCreateDoc'; -import { useUpdateDoc } from '../api/useUpdateDoc'; -import IconEdit from '../assets/icon-edit.svg'; -import { Doc } from '../types'; - -import { InputDocName } from './InputDocName'; - -interface ModalCreateDocProps { - onClose: () => void; -} - -export const ModalCreateDoc = ({ onClose }: ModalCreateDocProps) => { - const router = useRouter(); - const api = useCreateDoc({ - onSuccess: (doc) => { - router.push(`/docs/${doc.id}`); - }, - }); - const { t } = useTranslation(); - - return ( - - api.mutate({ - title, - }), - ...api, - }} - /> - ); -}; - -interface ModalUpdateDocProps { - onClose: () => void; - doc: Doc; -} - -export const ModalUpdateDoc = ({ onClose, doc }: ModalUpdateDocProps) => { - const { toast } = useToastProvider(); - const { t } = useTranslation(); - - const api = useUpdateDoc({ - onSuccess: () => { - toast(t('The document has been updated.'), VariantType.SUCCESS, { - duration: 4000, - }); - onClose(); - }, - listInvalideQueries: [KEY_DOC, KEY_LIST_DOC], - }); - - return ( - - api.mutate({ - title, - id: doc.id, - }), - ...api, - }} - /> - ); -}; - -type ModalDoc = { - buttonText: string; - onClose: () => void; - titleModal: string; - validate: (title: string) => void; - initialTitle?: string; - infoText?: string; -} & UseMutationResult, T, unknown>; - -const ModalDoc = ({ - buttonText, - infoText, - initialTitle, - onClose, - titleModal, - validate, - ...api -}: ModalDoc) => { - const { colorsTokens } = useCunninghamTheme(); - const { t } = useTranslation(); - const [title, setTitle] = useState(initialTitle || ''); - - return ( - onClose()} - > - {t('Cancel')} - - } - onClose={() => onClose()} - rightActions={ - - } - size={ModalSize.MEDIUM} - title={ - - - - {titleModal} - - - } - > - - {infoText && ( - - {infoText} - - )} - - - - - - - ); -}; diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts b/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts index 04d5b0c9..120ce76f 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts @@ -1,3 +1,2 @@ -export * from './ModalCreateUpdateDoc'; export * from './ModalRemoveDoc'; export * from './ModalShare'; diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx index d9ae203f..6a57a2fb 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx @@ -2,12 +2,7 @@ import { Button } from '@openfun/cunningham-react'; import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Box, DropButton, IconOptions, Text } from '@/components'; -import { - Doc, - ModalRemoveDoc, - ModalUpdateDoc, -} from '@/features/docs/doc-management'; +import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management'; interface DocsGridActionsProps { doc: Doc; @@ -15,58 +10,24 @@ interface DocsGridActionsProps { export const DocsGridActions = ({ doc }: DocsGridActionsProps) => { const { t } = useTranslation(); - const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false); const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false); - const [isDropOpen, setIsDropOpen] = useState(false); - if (!doc.abilities.partial_update && !doc.abilities.destroy) { + if (!doc.abilities.destroy) { return null; } return ( <> - - } - onOpenChange={(isOpen) => setIsDropOpen(isOpen)} - isOpen={isDropOpen} - > - - {doc.abilities.partial_update && ( - - )} - {doc.abilities.destroy && ( - - )} - - - {isModalUpdateOpen && ( - setIsModalUpdateOpen(false)} doc={doc} /> - )} +