From b83875fc97419b179c0f8831f65eb454e33ba4ca Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Tue, 3 Sep 2024 12:04:18 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20move=20Panel=20c?= =?UTF-8?q?omponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We will have multiple Panel components in the future, so we move it to the root of the components folder. We refacto the Version Panel to use the new Panel component. --- .../__tests__/app-impress/doc-version.spec.ts | 8 ++--- .../doc-versioning => }/components/Panel.tsx | 29 ++++++++----------- .../docs/doc-editor/components/DocEditor.tsx | 11 +++++-- .../docs/doc-header/components/DocToolBox.tsx | 4 +-- .../docs/doc-versioning/components/index.ts | 2 +- .../stores/useDocVersionStore.tsx | 10 +++---- 6 files changed, 32 insertions(+), 32 deletions(-) rename src/frontend/apps/impress/src/{features/docs/doc-versioning => }/components/Panel.tsx (77%) diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts index 6c68dbfc..a14a57d3 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts @@ -19,7 +19,7 @@ test.describe('Doc Version', () => { }) .click(); - const panel = page.getByLabel('Document version panel'); + const panel = page.getByLabel('Document panel'); await expect(panel.getByText('Current version')).toBeVisible(); expect(await panel.locator('li').count()).toBe(1); @@ -79,7 +79,7 @@ test.describe('Doc Version', () => { page.getByRole('button', { name: 'Version history' }), ).toBeHidden(); - await expect(page.getByLabel('Document version panel')).toBeHidden(); + await expect(page.getByLabel('Document panel')).toBeHidden(); }); test('it restores the doc version', async ({ page, browserName }) => { @@ -112,7 +112,7 @@ test.describe('Doc Version', () => { }) .click(); - const panel = page.getByLabel('Document version panel'); + const panel = page.getByLabel('Document panel'); await panel.locator('li').nth(1).click(); await expect(page.getByText('World')).toBeHidden(); @@ -167,7 +167,7 @@ test.describe('Doc Version', () => { }) .click(); - const panel = page.getByLabel('Document version panel'); + const panel = page.getByLabel('Document panel'); await panel.locator('li').nth(1).click(); await expect(page.getByText('World')).toBeHidden(); diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/Panel.tsx b/src/frontend/apps/impress/src/components/Panel.tsx similarity index 77% rename from src/frontend/apps/impress/src/features/docs/doc-versioning/components/Panel.tsx rename to src/frontend/apps/impress/src/components/Panel.tsx index 2d6c15f3..37c7ca55 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/Panel.tsx +++ b/src/frontend/apps/impress/src/components/Panel.tsx @@ -1,22 +1,21 @@ -import React, { useEffect, useState } from 'react'; +import React, { PropsWithChildren, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Box, Card, IconBG, Text } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; -import { Doc } from '@/features/docs/doc-management'; - -import { useDocVersionStore } from '../stores'; - -import { VersionList } from './VersionList'; interface PanelProps { - doc: Doc; + title: string; + setIsPanelOpen: (isOpen: boolean) => void; } -export const Panel = ({ doc }: PanelProps) => { +export const Panel = ({ + children, + title, + setIsPanelOpen, +}: PropsWithChildren) => { const { t } = useTranslation(); const { colorsTokens } = useCunninghamTheme(); - const { setIsPanelOpen } = useDocVersionStore(); const [isOpen, setIsOpen] = useState(false); @@ -50,7 +49,7 @@ export const Panel = ({ doc }: PanelProps) => { ` } `} - aria-label={t('Document version panel')} + aria-label={t('Document panel')} {...closedOverridingStyles} > { > { $radius="2px" /> - {t('VERSIONS')} + {title} - + {children} ); 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 4988ea54..6ddcf657 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 @@ -5,11 +5,12 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Box, Card, Text, TextErrors } from '@/components'; +import { Panel } from '@/components/Panel'; import { useCunninghamTheme } from '@/cunningham'; import { DocHeader } from '@/features/docs/doc-header'; import { Doc } from '@/features/docs/doc-management'; import { - Panel, + VersionList, Versions, useDocVersion, useDocVersionStore, @@ -25,7 +26,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => { const { query: { versionId }, } = useRouter(); - const { isPanelOpen } = useDocVersionStore(); + const { isPanelVersionOpen, setIsPanelVersionOpen } = useDocVersionStore(); const { t } = useTranslation(); @@ -64,7 +65,11 @@ export const DocEditor = ({ doc }: DocEditorProps) => { )} - {doc.abilities.versions_list && isPanelOpen && } + {doc.abilities.versions_list && isPanelVersionOpen && ( + + + + )} ); 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 359564aa..cb33b548 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 @@ -24,7 +24,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false); const [isModalPDFOpen, setIsModalPDFOpen] = useState(false); const [isDropOpen, setIsDropOpen] = useState(false); - const { setIsPanelOpen } = useDocVersionStore(); + const { setIsPanelVersionOpen } = useDocVersionStore(); return ( { {doc.abilities.versions_list && (