From f5a35c66bb2505fdc641698d9a56f6e4578f67eb Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Tue, 9 Jul 2024 11:48:38 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20doc=20grid=20action?= =?UTF-8?q?s=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add document action buttons to the document grid: - update document - delete document --- CHANGELOG.md | 1 + .../__tests__/app-impress/doc-grid.spec.ts | 74 ++++++++++++++----- .../docs/docs-grid/components/DocsGrid.tsx | 8 ++ .../docs-grid/components/DocsGridActions.tsx | 71 ++++++++++++++++++ 4 files changed, 137 insertions(+), 17 deletions(-) create mode 100644 src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index f37aa757..b017c634 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to - 🤡(demo) generate dummy documents on dev users #120 - ✨(frontend) create side modal component #134 +- ✨(frontend) Doc grid actions (update / delete) #136 ## Changed 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 b827a942..5a402951 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 @@ -171,14 +171,9 @@ test.describe('Documents Grid', () => { const responsePage1 = await responsePromisePage1; expect(responsePage1.ok()).toBeTruthy(); - const docNamePage1 = datagridPage1 - .getByRole('row') - .nth(1) - .getByRole('cell') - .nth(1); - - await expect(docNamePage1).toHaveText(/.*/); - const textDocNamePage1 = await docNamePage1.textContent(); + await expect( + datagridPage1.getByRole('row').nth(1).getByRole('cell').nth(1), + ).toHaveText(/.*/); await page.getByLabel('Go to page 2').click(); @@ -189,17 +184,62 @@ test.describe('Documents Grid', () => { const responsePage2 = await responsePromisePage2; expect(responsePage2.ok()).toBeTruthy(); - const docNamePage2 = datagridPage2 - .getByRole('row') - .nth(1) - .getByRole('cell') - .nth(1); + await expect( + datagridPage2.getByRole('row').nth(1).getByRole('cell').nth(1), + ).toHaveText(/.*/); + }); - await expect(datagridPage2.getByLabel('Loading data')).toBeHidden(); + test('it updates document', async ({ page }) => { + const datagrid = page + .getByLabel('Datagrid of the documents page 1') + .getByRole('table'); - await expect(docNamePage2).toHaveText(/.*/); - const textDocNamePage2 = await docNamePage2.textContent(); + const docRow = datagrid.getByRole('row').nth(1).getByRole('cell'); - expect(textDocNamePage1 !== textDocNamePage2).toBeTruthy(); + 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') + .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 + .getByRole('button', { + name: 'Delete document', + }) + .click(); + + await expect( + page.locator('h2').getByText(`Deleting the document "${docName}"`), + ).toBeVisible(); + + await page + .getByRole('button', { + name: 'Confirm deletion', + }) + .click(); + + await expect( + page.getByText('The document has been deleted.'), + ).toBeVisible(); + + await expect(datagrid.getByText(docName!)).toBeHidden(); }); }); diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx index 191bd09d..90592be7 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx @@ -17,6 +17,8 @@ import { import { PAGE_SIZE } from '../conf'; +import { DocsGridActions } from './DocsGridActions'; + const DocsGridStyle = createGlobalStyle` & .c__datagrid{ max-height: 91%; @@ -191,6 +193,12 @@ export const DocsGrid = () => { ); }, }, + { + id: 'column-actions', + renderCell: ({ row }) => { + return ; + }, + }, ]} rows={docs} isLoading={isLoading} 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 new file mode 100644 index 00000000..5b6d85f2 --- /dev/null +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx @@ -0,0 +1,71 @@ +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'; + +interface DocsGridActionsProps { + doc: Doc; +} + +export const DocsGridActions = ({ doc }: DocsGridActionsProps) => { + const { t } = useTranslation(); + const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false); + const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false); + const [isDropOpen, setIsDropOpen] = useState(false); + + return ( + <> + + } + onOpenChange={(isOpen) => setIsDropOpen(isOpen)} + isOpen={isDropOpen} + > + + {doc.abilities.partial_update && ( + + )} + {doc.abilities.destroy && ( + + )} + + + {isModalUpdateOpen && ( + setIsModalUpdateOpen(false)} doc={doc} /> + )} + {isModalRemoveOpen && ( + setIsModalRemoveOpen(false)} doc={doc} /> + )} + + ); +};