diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-panel.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-panel.spec.ts deleted file mode 100644 index 1887af75..00000000 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-panel.spec.ts +++ /dev/null @@ -1,159 +0,0 @@ -import { expect, test } from '@playwright/test'; - -import { waitForElementCount } from '../helpers'; - -import { createDoc } from './common'; - -test.beforeEach(async ({ page }) => { - await page.goto('/'); -}); - -test.describe('Documents Panel', () => { - test('checks all the elements are visible', async ({ page }) => { - const panel = page.getByLabel('Documents panel').first(); - - await expect(panel.getByText('Documents')).toBeVisible(); - - await expect( - panel.getByRole('button', { - name: 'Sort the documents', - }), - ).toBeVisible(); - - await expect( - panel.getByRole('button', { - name: 'Add a document', - }), - ).toBeVisible(); - }); - - test('checks the sort button', async ({ page }) => { - const responsePromiseSortDesc = page.waitForResponse( - (response) => - response.url().includes('/documents/?page=1&ordering=-created_at') && - response.status() === 200, - ); - - const responsePromiseSortAsc = page.waitForResponse( - (response) => - response.url().includes('/documents/?page=1&ordering=created_at') && - response.status() === 200, - ); - - const panel = page.getByLabel('Documents panel').first(); - - await panel - .getByRole('button', { - name: 'Sort the documents by creation date ascendent', - }) - .click(); - - const responseSortAsc = await responsePromiseSortAsc; - expect(responseSortAsc.ok()).toBeTruthy(); - - await panel - .getByRole('button', { - name: 'Sort the documents by creation date descendent', - }) - .click(); - - const responseSortDesc = await responsePromiseSortDesc; - expect(responseSortDesc.ok()).toBeTruthy(); - }); - - test('checks the infinite scroll', async ({ page }) => { - await page.route( - /.*\/documents\/\?page=.*&ordering=-created_at/, - async (route) => { - const request = route.request(); - const url = new URL(request.url()); - const pageId = url.searchParams.get('page'); - const documents = { - count: 40, - next: 'http://localhost:3000/documents/?page=2&ordering=-created_at', - previous: null, - results: Array.from({ length: 20 }, (_, i) => ({ - id: `2ff-${pageId}-${i}`, - title: `My document-${pageId}-${i}`, - accesses: [ - { - id: 'b644e9b1-0517-4cfb-90ca-f7d6f2f6bb9a', - role: `owner`, - team: '', - user: { - id: 'a4743608-c9d8-4692-bef4-f795e25a3a88', - email: 'user@chromium.e2e', - }, - }, - ], - content: '', - is_public: true, - abilities: {}, - })), - }; - - if (request.method().includes('GET')) { - await route.fulfill({ - json: documents, - }); - } else { - await route.continue(); - } - }, - ); - - await page.route(`**/documents/2ff-1-16/`, async (route) => { - const request = route.request(); - - if (request.method().includes('GET')) { - await route.fulfill({ - json: { - id: '2ff-1-16', - title: 'My document-1-16', - content: '', - abilities: { - partial_update: true, - }, - accesses: [ - { - id: 'b644e9b1-0517-4cfb-90ca-f7d6f2f6bb9a', - role: `owner`, - team: '', - user: { - id: 'a4743608-c9d8-4692-bef4-f795e25a3a88', - email: '', - }, - }, - ], - }, - }); - } else { - await route.continue(); - } - }); - - const panel = page.getByLabel('Documents panel').first(); - await expect(panel.locator('li')).toHaveCount(20); - await panel.getByText(`My document-1-16`).click(); - - await waitForElementCount(panel.locator('li'), 21, 10000); - expect(await panel.locator('li').count()).toBeGreaterThan(20); - await expect(panel.getByText(`My document-1-16`)).toBeVisible(); - await expect(panel.getByText(`My document-2-15`)).toBeVisible(); - }); - - test('checks the hover and selected state', async ({ page, browserName }) => { - const panel = page.getByLabel('Documents panel').first(); - await createDoc(page, 'doc-hover', browserName, 2); - - const selectedDoc = panel.locator('li').nth(0); - await expect(selectedDoc).toHaveCSS( - 'background-color', - 'rgb(202, 202, 251)', - ); - - const hoverDoc = panel.locator('li').nth(1); - await hoverDoc.hover(); - await expect(hoverDoc).toHaveCSS('background-color', 'rgb(227, 227, 253)'); - }); -}); diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/__tests__/PanelDocs.test.tsx b/src/frontend/apps/impress/src/features/docs/docs-panel/__tests__/PanelDocs.test.tsx deleted file mode 100644 index 2d03db55..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/__tests__/PanelDocs.test.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import '@testing-library/jest-dom'; -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import fetchMock from 'fetch-mock'; - -import { AppWrapper } from '@/tests/utils'; - -import { DocList } from '../components/DocList'; -import { Panel } from '../components/Panel'; - -window.HTMLElement.prototype.scroll = function () {}; - -jest.mock('next/router', () => ({ - ...jest.requireActual('next/router'), - useRouter: () => ({ - query: {}, - }), -})); - -describe('PanelDocs', () => { - afterEach(() => { - fetchMock.restore(); - }); - - it('renders with no doc to display', async () => { - fetchMock.mock(`end:/documents/?page=1&ordering=-created_at`, { - count: 0, - results: [], - }); - - render(, { wrapper: AppWrapper }); - - expect(screen.getByRole('status')).toBeInTheDocument(); - - expect( - await screen.findByText( - 'Create your first document by clicking on the "Create a new document" button.', - ), - ).toBeInTheDocument(); - }); - - it('renders an empty doc', async () => { - fetchMock.mock(`end:/documents/?page=1&ordering=-created_at`, { - count: 1, - results: [ - { - id: '1', - name: 'Team 1', - accesses: [], - }, - ], - }); - - render(, { wrapper: AppWrapper }); - - expect(screen.getByRole('status')).toBeInTheDocument(); - - expect(await screen.findByLabelText('Empty docs icon')).toBeInTheDocument(); - }); - - it('renders a doc with only 1 member', async () => { - fetchMock.mock(`end:/documents/?page=1&ordering=-created_at`, { - count: 1, - results: [ - { - id: '1', - name: 'Team 1', - accesses: [ - { - id: '1', - role: 'owner', - }, - ], - }, - ], - }); - - render(, { wrapper: AppWrapper }); - - expect(screen.getByRole('status')).toBeInTheDocument(); - - expect(await screen.findByLabelText('Empty docs icon')).toBeInTheDocument(); - }); - - it('renders a non-empty doc', async () => { - fetchMock.mock(`end:/documents/?page=1&ordering=-created_at`, { - count: 1, - results: [ - { - id: '1', - name: 'Doc 1', - accesses: [ - { - id: '1', - role: 'admin', - }, - { - id: '2', - role: 'member', - }, - ], - }, - ], - }); - - render(, { wrapper: AppWrapper }); - - expect(screen.getByRole('status')).toBeInTheDocument(); - - expect(await screen.findByLabelText('Docs icon')).toBeInTheDocument(); - }); - - it('renders the error', async () => { - fetchMock.mock(`end:/documents/?page=1&ordering=-created_at`, { - status: 500, - }); - - render(, { wrapper: AppWrapper }); - - expect(screen.getByRole('status')).toBeInTheDocument(); - - expect( - await screen.findByText('Something bad happens, please retry.'), - ).toBeInTheDocument(); - }); - - it('renders with doc panel open', async () => { - fetchMock.mock(`end:/documents/?page=1&ordering=-created_at`, { - count: 1, - results: [], - }); - - render(, { wrapper: AppWrapper }); - - expect( - screen.getByRole('button', { name: 'Close the documents panel' }), - ).toBeVisible(); - - expect(await screen.findByText('Documents')).toBeVisible(); - }); - - it('closes and opens the doc panel', async () => { - fetchMock.mock(`end:/documents/?page=1&ordering=-created_at`, { - count: 1, - results: [], - }); - - render(, { wrapper: AppWrapper }); - - expect(await screen.findByText('Documents')).toBeVisible(); - - await userEvent.click( - screen.getByRole('button', { - name: 'Close the documents panel', - }), - ); - - expect(await screen.findByText('Documents')).not.toBeVisible(); - - await userEvent.click( - screen.getByRole('button', { - name: 'Open the documents panel', - }), - ); - - expect(await screen.findByText('Documents')).toBeVisible(); - }); -}); diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/assets/icon-add.svg b/src/frontend/apps/impress/src/features/docs/docs-panel/assets/icon-add.svg deleted file mode 100644 index a198da2b..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/assets/icon-add.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/assets/icon-none.svg b/src/frontend/apps/impress/src/features/docs/docs-panel/assets/icon-none.svg deleted file mode 100644 index 9f80850e..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/assets/icon-none.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/assets/icon-sort.svg b/src/frontend/apps/impress/src/features/docs/docs-panel/assets/icon-sort.svg deleted file mode 100644 index ac4565d3..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/assets/icon-sort.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/components/DocItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-panel/components/DocItem.tsx deleted file mode 100644 index aa4ab8d1..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/components/DocItem.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { useRouter } from 'next/router'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import IconGroup from '@/assets/icons/icon-group.svg'; -import { Box, StyledLink, Text } from '@/components'; -import { useCunninghamTheme } from '@/cunningham'; -import { Doc } from '@/features/docs/doc-management'; - -import IconNone from '../assets/icon-none.svg'; - -interface DocItemProps { - doc: Doc; -} - -export const DocItem = ({ doc }: DocItemProps) => { - const { t } = useTranslation(); - const { colorsTokens } = useCunninghamTheme(); - const { - query: { id }, - } = useRouter(); - - // There is at least 1 owner in the team - const hasMembers = doc.accesses.length > 1; - const isActive = doc.id === id; - - const commonProps = { - className: 'p-t', - width: 52, - style: { - borderRadius: '10px', - flexShrink: 0, - background: '#fff', - }, - }; - - const activeStyle = ` - border-right: 4px solid ${colorsTokens()['primary-600']}; - background: ${colorsTokens()['primary-400']}; - span{ - color: ${colorsTokens()['primary-text']}; - } - `; - - const hoverStyle = ` - &:hover{ - border-right: 4px solid ${colorsTokens()['primary-400']}; - background: ${colorsTokens()['primary-300']}; - - span{ - color: ${colorsTokens()['primary-text']}; - } - } - `; - - return ( - - - - {hasMembers ? ( - - ) : ( - - )} - - {doc.title} - - - - - ); -}; diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/components/DocList.tsx b/src/frontend/apps/impress/src/features/docs/docs-panel/components/DocList.tsx deleted file mode 100644 index 64cf7acd..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/components/DocList.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Loader } from '@openfun/cunningham-react'; -import React, { useMemo, useRef } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { APIError } from '@/api'; -import { Box, Text, TextErrors } from '@/components'; -import { InfiniteScroll } from '@/components/InfiniteScroll'; -import { Doc, useDocs } from '@/features/docs/doc-management'; - -import { useDocPanelStore } from '../store'; - -import { DocItem } from './DocItem'; - -interface PanelTeamsStateProps { - isLoading: boolean; - error: APIError | null; - docs?: Doc[]; -} - -const DocListState = ({ isLoading, error, docs }: PanelTeamsStateProps) => { - const { t } = useTranslation(); - - if (isLoading) { - return ( - - - - ); - } - - if (!docs?.length && !error) { - return ( - - - {t('0 group to display.')} - - - {t( - 'Create your first document by clicking on the "Create a new document" button.', - )} - - - ); - } - - return ( - <> - {docs?.map((doc) => )} - {error && ( - - - wifi_off - - ) : undefined - } - /> - - )} - - ); -}; - -export const DocList = () => { - const ordering = useDocPanelStore((state) => state.ordering); - const { - data, - error, - isLoading, - fetchNextPage, - hasNextPage, - isFetchingNextPage, - } = useDocs({ - ordering, - }); - const containerRef = useRef(null); - const docs = useMemo(() => { - return data?.pages.reduce((acc, page) => { - return acc.concat(page.results); - }, [] as Doc[]); - }, [data?.pages]); - - return ( - - { - void fetchNextPage(); - }} - scrollContainer={containerRef.current} - as="ul" - $padding="none" - $margin={{ top: 'none' }} - role="listbox" - > - - - - ); -}; diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/components/Panel.tsx b/src/frontend/apps/impress/src/features/docs/docs-panel/components/Panel.tsx deleted file mode 100644 index 53cc9ac6..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/components/Panel.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { Box, BoxButton, Text } from '@/components'; -import { useCunninghamTheme } from '@/cunningham'; - -import { DocList } from './DocList'; -import { PanelActions } from './PanelActions'; - -export const Panel = () => { - const { t } = useTranslation(); - const { colorsTokens } = useCunninghamTheme(); - - const [isOpen, setIsOpen] = useState(true); - - const closedOverridingStyles = !isOpen && { - $width: '0', - $maxWidth: '0', - $minWidth: '0', - }; - - const transition = 'all 0.5s ease-in-out'; - - return ( - - setIsOpen(!isOpen)} - $css={` - right: ${isOpen ? '-1.3' : '-2.8'}rem; - top: ${isOpen ? '0.7' : '0.25'}rem; - transform: rotate(${isOpen ? '0' : '180'}deg); - transition: ${transition}; - font-size: 1.8rem; - border: 1px solid #fafafa; - box-shadow: ${isOpen ? '1px 1px' : '-1px -1px'} 3px #dfdfdf; - z-index: 1; - `} - > - menu_open - - - - - {t('Documents')} - - - - - - - ); -}; diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/components/PanelActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-panel/components/PanelActions.tsx deleted file mode 100644 index 08fd8d97..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/components/PanelActions.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { Box, BoxButton, StyledLink } from '@/components'; -import { useCunninghamTheme } from '@/cunningham'; -import { DocsOrdering } from '@/features/docs/doc-management'; - -import IconAdd from '../assets/icon-add.svg'; -import IconSort from '../assets/icon-sort.svg'; -import { useDocPanelStore } from '../store'; - -export const PanelActions = () => { - const { t } = useTranslation(); - const { changeOrdering, ordering } = useDocPanelStore(); - const { colorsTokens } = useCunninghamTheme(); - - const isSortAsc = ordering === DocsOrdering.BY_CREATED_ON; - - return ( - - - - - - - - - - - ); -}; diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/components/index.ts b/src/frontend/apps/impress/src/features/docs/docs-panel/components/index.ts deleted file mode 100644 index 8960d84f..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Panel'; diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/index.ts b/src/frontend/apps/impress/src/features/docs/docs-panel/index.ts deleted file mode 100644 index 07635cbb..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components'; diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/store/index.ts b/src/frontend/apps/impress/src/features/docs/docs-panel/store/index.ts deleted file mode 100644 index 071659ba..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/store/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useDocPanelStore'; diff --git a/src/frontend/apps/impress/src/features/docs/docs-panel/store/useDocPanelStore.tsx b/src/frontend/apps/impress/src/features/docs/docs-panel/store/useDocPanelStore.tsx deleted file mode 100644 index 64dc0c73..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-panel/store/useDocPanelStore.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { create } from 'zustand'; - -import { DocsOrdering } from '@/features/docs/doc-management/api'; - -interface DocPanelStore { - ordering: DocsOrdering; - changeOrdering: () => void; -} - -export const useDocPanelStore = create((set) => ({ - ordering: DocsOrdering.BY_CREATED_ON_DESC, - changeOrdering: () => - set(({ ordering }) => ({ - ordering: - ordering === DocsOrdering.BY_CREATED_ON - ? DocsOrdering.BY_CREATED_ON_DESC - : DocsOrdering.BY_CREATED_ON, - })), -})); diff --git a/src/frontend/apps/impress/src/features/docs/index.ts b/src/frontend/apps/impress/src/features/docs/index.ts index ea74693f..38b42b0b 100644 --- a/src/frontend/apps/impress/src/features/docs/index.ts +++ b/src/frontend/apps/impress/src/features/docs/index.ts @@ -1,3 +1,2 @@ export * from './doc-editor'; export * from './doc-management'; -export * from './docs-panel'; diff --git a/src/frontend/apps/impress/src/layouts/DocLayout.tsx b/src/frontend/apps/impress/src/layouts/DocLayout.tsx deleted file mode 100644 index 07e64232..00000000 --- a/src/frontend/apps/impress/src/layouts/DocLayout.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import { Box } from '@/components'; -import { useCunninghamTheme } from '@/cunningham'; -import { Panel } from '@/features/docs/docs-panel'; - -import { MainLayout } from './MainLayout'; - -export function DocLayout({ children }: PropsWithChildren) { - const { colorsTokens } = useCunninghamTheme(); - - return ( - - - - - {children} - - - - ); -} diff --git a/src/frontend/apps/impress/src/layouts/index.ts b/src/frontend/apps/impress/src/layouts/index.ts index 54c634f8..eb143cc4 100644 --- a/src/frontend/apps/impress/src/layouts/index.ts +++ b/src/frontend/apps/impress/src/layouts/index.ts @@ -1,3 +1,2 @@ export * from './MainLayout'; -export * from './DocLayout'; export * from './PageLayout'; diff --git a/src/frontend/apps/impress/src/pages/docs/[id].tsx b/src/frontend/apps/impress/src/pages/docs/[id].tsx index e192ba1e..c3164be3 100644 --- a/src/frontend/apps/impress/src/pages/docs/[id].tsx +++ b/src/frontend/apps/impress/src/pages/docs/[id].tsx @@ -6,7 +6,7 @@ import { ReactElement } from 'react'; import { Box, Text, TextErrors } from '@/components/'; import { DocEditor } from '@/features/docs/doc-editor'; import { useDoc } from '@/features/docs/doc-management'; -import { DocLayout } from '@/layouts'; +import { MainLayout } from '@/layouts'; import { NextPageWithLayout } from '@/types/next'; const Page: NextPageWithLayout = () => { @@ -63,7 +63,7 @@ const Doc = ({ id }: DocProps) => { }; Page.getLayout = function getLayout(page: ReactElement) { - return {page}; + return {page}; }; export default Page; diff --git a/src/frontend/apps/impress/src/pages/docs/create.tsx b/src/frontend/apps/impress/src/pages/docs/create.tsx index 8a43f70d..fb99074e 100644 --- a/src/frontend/apps/impress/src/pages/docs/create.tsx +++ b/src/frontend/apps/impress/src/pages/docs/create.tsx @@ -2,7 +2,7 @@ import { ReactElement } from 'react'; import { Box } from '@/components'; import { CardCreateDoc } from '@/features/docs/doc-management'; -import { DocLayout } from '@/layouts'; +import { MainLayout } from '@/layouts'; import { NextPageWithLayout } from '@/types/next'; const Page: NextPageWithLayout = () => { @@ -14,7 +14,7 @@ const Page: NextPageWithLayout = () => { }; Page.getLayout = function getLayout(page: ReactElement) { - return {page}; + return {page}; }; export default Page; diff --git a/src/frontend/apps/impress/src/pages/index.tsx b/src/frontend/apps/impress/src/pages/index.tsx index 09fc2bc9..c6fc9734 100644 --- a/src/frontend/apps/impress/src/pages/index.tsx +++ b/src/frontend/apps/impress/src/pages/index.tsx @@ -1,16 +1,3 @@ -import type { ReactElement } from 'react'; - -import { DocLayout } from '@/layouts'; -import { NextPageWithLayout } from '@/types/next'; - import Docs from './docs'; -const Page: NextPageWithLayout = () => { - return ; -}; - -Page.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Page; +export default Docs;