From ff832239d3bfe43ae4dc206c421d8f20b50594f3 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 10 Jul 2024 13:03:42 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20doc=20editor=20pane?= =?UTF-8?q?l=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add doc editor panel header to show the doc title and other info. --- CHANGELOG.md | 1 + .../__tests__/app-impress/doc-header.spec.ts | 80 ++++++++++++++ src/frontend/apps/e2e/playwright.config.ts | 2 + .../apps/impress/src/components/Box.tsx | 2 + .../apps/impress/src/components/Text.tsx | 4 + .../docs/doc-editor/components/DocEditor.tsx | 18 +--- .../api/useCreatePdf.tsx | 0 .../api/useTemplates.tsx | 0 .../docs/doc-header/components/DocHeader.tsx | 102 ++++++++++++++++++ .../components/DocToolBox.tsx | 2 +- .../components/ModalPDF.tsx | 0 .../docs/doc-header/components/index.ts | 1 + .../docs/{doc-tools => doc-header}/index.tsx | 0 .../docs/{doc-tools => doc-header}/types.ts | 0 .../docs/{doc-tools => doc-header}/utils.ts | 0 .../docs/doc-tools/components/index.ts | 1 - 16 files changed, 197 insertions(+), 16 deletions(-) create mode 100644 src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts rename src/frontend/apps/impress/src/features/docs/{doc-tools => doc-header}/api/useCreatePdf.tsx (100%) rename src/frontend/apps/impress/src/features/docs/{doc-tools => doc-header}/api/useTemplates.tsx (100%) create mode 100644 src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx rename src/frontend/apps/impress/src/features/docs/{doc-tools => doc-header}/components/DocToolBox.tsx (98%) rename src/frontend/apps/impress/src/features/docs/{doc-tools => doc-header}/components/ModalPDF.tsx (100%) create mode 100644 src/frontend/apps/impress/src/features/docs/doc-header/components/index.ts rename src/frontend/apps/impress/src/features/docs/{doc-tools => doc-header}/index.tsx (100%) rename src/frontend/apps/impress/src/features/docs/{doc-tools => doc-header}/types.ts (100%) rename src/frontend/apps/impress/src/features/docs/{doc-tools => doc-header}/utils.ts (100%) delete mode 100644 src/frontend/apps/impress/src/features/docs/doc-tools/components/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index b017c634..54bdcf29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,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 +- ✨(frontend) Doc editor header information #137 ## Changed 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 new file mode 100644 index 00000000..47d204f5 --- /dev/null +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts @@ -0,0 +1,80 @@ +import { expect, test } from '@playwright/test'; + +import { goToGridDoc } from './common'; + +test.beforeEach(async ({ page }) => { + await page.goto('/'); +}); + +test.describe('Doc Header', () => { + test('it checks the element are correctly displayed', async ({ page }) => { + await page.route('**/documents/**/', async (route) => { + const request = route.request(); + if ( + request.method().includes('GET') && + !request.url().includes('page=') + ) { + await route.fulfill({ + json: { + id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg', + content: '', + title: 'Mocked document', + accesses: [ + { + id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg', + role: 'owner', + user: { + email: 'super@owner.com', + }, + }, + { + id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg', + role: 'admin', + user: { + email: 'super@admin.com', + }, + }, + { + id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg', + role: 'owner', + user: { + email: 'super2@owner.com', + }, + }, + ], + abilities: { + destroy: true, // Means owner + versions_destroy: true, + versions_list: true, + versions_retrieve: true, + manage_accesses: true, + update: true, + partial_update: true, + retrieve: true, + }, + is_public: true, + created_at: '2021-09-01T09:00:00Z', + }, + }); + } else { + await route.continue(); + } + }); + + await goToGridDoc(page); + + const card = page.getByLabel( + 'It is the card information about the document.', + ); + await expect(card.locator('a').getByText('home')).toBeVisible(); + await expect(card.locator('h2').getByText('Mocked document')).toBeVisible(); + await expect(card.getByText('Public')).toBeVisible(); + await expect( + card.getByText('Created at 09/01/2021, 11:00 AM'), + ).toBeVisible(); + await expect( + card.getByText('Owners: super@owner.com / super2@owner.com'), + ).toBeVisible(); + await expect(card.getByText('Your role: Owner')).toBeVisible(); + }); +}); diff --git a/src/frontend/apps/e2e/playwright.config.ts b/src/frontend/apps/e2e/playwright.config.ts index 18986866..9809d624 100644 --- a/src/frontend/apps/e2e/playwright.config.ts +++ b/src/frontend/apps/e2e/playwright.config.ts @@ -48,6 +48,7 @@ export default defineConfig({ use: { ...devices['Desktop Chrome'], locale: 'en-US', + timezoneId: 'Europe/Paris', storageState: 'playwright/.auth/user-chromium.json', }, dependencies: ['setup'], @@ -57,6 +58,7 @@ export default defineConfig({ use: { ...devices['Desktop Safari'], locale: 'en-US', + timezoneId: 'Europe/Paris', storageState: 'playwright/.auth/user-webkit.json', }, dependencies: ['setup'], diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx index 1417c23e..59140357 100644 --- a/src/frontend/apps/impress/src/components/Box.tsx +++ b/src/frontend/apps/impress/src/components/Box.tsx @@ -35,6 +35,7 @@ export interface BoxProps { $radius?: CSSProperties['borderRadius']; $transition?: CSSProperties['transition']; $width?: CSSProperties['width']; + $wrap?: CSSProperties['flexWrap']; $zIndex?: CSSProperties['zIndex']; } @@ -65,6 +66,7 @@ export const Box = styled('div')` ${({ $radius }) => $radius && `border-radius: ${$radius};`} ${({ $transition }) => $transition && `transition: ${$transition};`} ${({ $width }) => $width && `width: ${$width};`} + ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`} ${({ $css }) => $css && `${$css};`} ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`} ${({ $effect }) => { diff --git a/src/frontend/apps/impress/src/components/Text.tsx b/src/frontend/apps/impress/src/components/Text.tsx index e2cce1a4..a0c0300e 100644 --- a/src/frontend/apps/impress/src/components/Text.tsx +++ b/src/frontend/apps/impress/src/components/Text.tsx @@ -13,6 +13,7 @@ export interface TextProps extends BoxProps { ReactHTML, 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' >; + $elipsis?: boolean; $weight?: CSSProperties['fontWeight']; $textAlign?: CSSProperties['textAlign']; // eslint-disable-next-line @typescript-eslint/ban-types @@ -49,6 +50,9 @@ export const TextStyled = styled(Box)` ${({ $theme, $variation }) => `color: var(--c--theme--colors--${$theme}-${$variation});`} ${({ $color }) => $color && `color: ${$color};`} + ${({ $elipsis }) => + $elipsis && + `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`} `; export const Text = ({ diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx index 1076709f..7f134879 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx @@ -1,9 +1,9 @@ import { Alert, VariantType } from '@openfun/cunningham-react'; import React from 'react'; -import { Box, Card, Text } from '@/components'; +import { Box, Card } from '@/components'; +import { DocHeader } from '@/features/docs/doc-header'; import { Doc } from '@/features/docs/doc-management'; -import { DocToolBox } from '@/features/docs/doc-tools'; import { BlockNoteEditor } from './BlockNoteEditor'; @@ -14,19 +14,9 @@ interface DocEditorProps { export const DocEditor = ({ doc }: DocEditorProps) => { return ( <> - - - {doc.title} - - - + {!doc.abilities.partial_update && ( - + {`Read only, you don't have the right to update this document.`} diff --git a/src/frontend/apps/impress/src/features/docs/doc-tools/api/useCreatePdf.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/api/useCreatePdf.tsx similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-tools/api/useCreatePdf.tsx rename to src/frontend/apps/impress/src/features/docs/doc-header/api/useCreatePdf.tsx diff --git a/src/frontend/apps/impress/src/features/docs/doc-tools/api/useTemplates.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/api/useTemplates.tsx similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-tools/api/useTemplates.tsx rename to src/frontend/apps/impress/src/features/docs/doc-header/api/useTemplates.tsx diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx new file mode 100644 index 00000000..51b6f342 --- /dev/null +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx @@ -0,0 +1,102 @@ +import React, { Fragment } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Box, Card, StyledLink, Text } from '@/components'; +import { useCunninghamTheme } from '@/cunningham'; +import { + Doc, + Role, + currentDocRole, + useTransRole, +} from '@/features/docs/doc-management'; +import { useDate } from '@/hook'; + +import { DocToolBox } from './DocToolBox'; + +interface DocHeaderProps { + doc: Doc; +} + +export const DocHeader = ({ doc }: DocHeaderProps) => { + const { colorsTokens } = useCunninghamTheme(); + const { t } = useTranslation(); + const { formatDate } = useDate(); + const transRole = useTransRole(); + + return ( + + + + + home + + + + + {doc.title} + + + + + + {doc.is_public && ( + + {t('Public')} + + )} + + {t('Created at')} {formatDate(doc.created_at)} + + + {t('Owners:')}{' '} + + {doc.accesses + .filter((access) => access.role === Role.OWNER) + .map((access, index, accesses) => ( + + {access.user.email}{' '} + {index < accesses.length - 1 ? ' / ' : ''} + + ))} + + + + + {t('Your role:')}{' '} + {transRole(currentDocRole(doc.abilities))} + + + + ); +}; diff --git a/src/frontend/apps/impress/src/features/docs/doc-tools/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx similarity index 98% rename from src/frontend/apps/impress/src/features/docs/doc-tools/components/DocToolBox.tsx rename to src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx index 44d9104c..4f2f43ab 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tools/components/DocToolBox.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx @@ -28,7 +28,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { const [isDropOpen, setIsDropOpen] = useState(false); return ( - +