From 882c2ac979545d41d5a289fd71680e3f777fd74e Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 27 May 2026 16:22:30 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20replace=20visibi?= =?UTF-8?q?lity=20Alert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We remove the AlertPublic component and replace it with a new visibility status in the DocHeaderInfo component. This change simplifies the user interface by providing a more direct indication of the document's visibility status, whether it's public or internal, without needing an additional alert component. --- .../app-impress/doc-visibility.spec.ts | 48 ++----------- .../src/assets/icons/ui-kit/public.svg | 7 +- .../src/assets/icons/ui-kit/vpn_lock.svg | 7 +- .../__tests__/DocHeaderInfo.spec.tsx | 46 ------------ .../doc-header/components/AlertPublic.tsx | 33 --------- .../doc-header/components/AlertRestore.tsx | 1 - .../docs/doc-header/components/DocHeader.tsx | 13 +--- .../doc-header/components/DocHeaderInfo.tsx | 72 ++++++++++--------- 8 files changed, 54 insertions(+), 173 deletions(-) delete mode 100644 src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocHeaderInfo.spec.tsx delete mode 100644 src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts index a04996741..a057b5140 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts @@ -220,11 +220,7 @@ test.describe('Doc Visibility: Public', () => { 'It is the card information about the document.', ); - await expect(cardContainer.getByTestId('public-icon')).toBeVisible(); - - await expect( - cardContainer.getByText('Public document', { exact: true }), - ).toBeVisible(); + await expect(cardContainer.getByText('Public ·')).toBeVisible(); await expect(page.getByTestId('search-docs-button')).toBeVisible(); await expect(page.getByTestId('new-doc-button')).toBeVisible(); @@ -240,9 +236,6 @@ test.describe('Doc Visibility: Public', () => { await expect(otherPage.locator('h2').getByText(docTitle)).toBeVisible(); await expect(otherPage.getByTestId('search-docs-button')).toBeHidden(); await expect(otherPage.getByTestId('new-doc-button')).toBeHidden(); - await expect( - otherPage.getByRole('button', { name: 'Share' }), - ).toBeVisible(); const card = otherPage.getByLabel('It is the card information'); await expect(card).toBeVisible(); await expect(card.getByText('Reader')).toBeVisible(); @@ -266,17 +259,6 @@ test.describe('Doc Visibility: Public', () => { await writeInEditor({ page, text: 'Can you see it ?' }); await expect(otherEditor.getByText('Can you see it ?')).toBeVisible(); - await otherPage.getByRole('button', { name: 'Share' }).click(); - await expect( - otherPage.getByText( - 'You can view this document but need additional access to see its members or modify settings.', - ), - ).toBeVisible(); - - await expect( - otherPage.getByRole('button', { name: 'Request access' }), - ).toBeHidden(); - await cleanup(); }); @@ -313,11 +295,7 @@ test.describe('Doc Visibility: Public', () => { 'It is the card information about the document.', ); - await expect(cardContainer.getByTestId('public-icon')).toBeVisible(); - - await expect( - cardContainer.getByText('Public document', { exact: true }), - ).toBeVisible(); + await expect(cardContainer.getByText('Public ·')).toBeVisible(); const docUrl = page.url(); @@ -341,24 +319,10 @@ test.describe('Doc Visibility: Public', () => { page.locator('.collaboration-cursor-custom__base').getByText('Anonymous'), ).toBeVisible(); - await expect( - otherPage.getByRole('button', { name: 'Share' }), - ).toBeVisible(); const card = otherPage.getByLabel('It is the card information'); await expect(card).toBeVisible(); await expect(card.getByText('Editor')).toBeVisible(); - await otherPage.getByRole('button', { name: 'Share' }).click(); - await expect( - otherPage.getByText( - 'You can view this document but need additional access to see its members or modify settings.', - ), - ).toBeVisible(); - - await expect( - otherPage.getByRole('button', { name: 'Request access' }), - ).toBeHidden(); - await cleanup(); }); }); @@ -433,16 +397,14 @@ test.describe('Doc Visibility: Authenticated', () => { page.getByText('The document visibility has been updated.'), ).toBeVisible(); + await page.getByRole('button', { name: 'close' }).click(); + await expect( page .getByLabel('It is the card information about the document.') - .getByText('Document accessible to any connected person', { - exact: true, - }), + .getByText('Internal ·'), ).toBeVisible(); - await page.getByRole('button', { name: 'close' }).click(); - const docUrl = page.url(); const { name: childTitle } = await createRootSubPage( diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/public.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/public.svg index 5c867ad13..3f8601d52 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/public.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/public.svg @@ -1,3 +1,6 @@ - - + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/vpn_lock.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/vpn_lock.svg index 6c05021ee..438f2daff 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/vpn_lock.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/vpn_lock.svg @@ -1,3 +1,6 @@ - - + + diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocHeaderInfo.spec.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocHeaderInfo.spec.tsx deleted file mode 100644 index 93f1a4991..000000000 --- a/src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocHeaderInfo.spec.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import React from 'react'; -import { describe, expect, test, vi } from 'vitest'; - -import { AppWrapper } from '@/tests/utils'; - -// Force mobile layout so the children count is rendered -vi.mock('@/stores', () => ({ - useResponsiveStore: () => ({ isDesktop: false }), -})); - -// Provide stable mocks for hooks used by the component -vi.mock('../../doc-management', async () => { - const actual = await vi.importActual('../../doc-management'); - return { - ...actual, - useTrans: () => ({ transRole: vi.fn((r) => String(r)) }), - useIsCollaborativeEditable: () => ({ isEditable: true }), - }; -}); - -vi.mock('@/core', () => ({ - useConfig: () => ({ data: {} }), -})); - -vi.mock('@/hook', () => ({ - useDate: () => ({ - relativeDate: () => 'yesterday', - calculateDaysLeft: () => 5, - }), -})); - -import { DocHeaderInfo } from '../components/DocHeaderInfo'; - -describe('DocHeaderInfo', () => { - test('renders the number of sub-documents when numchild is provided (mobile layout)', () => { - const doc = { - numchild: 3, - updated_at: new Date().toISOString(), - } as any; - - render(, { wrapper: AppWrapper }); - - expect(screen.getByText(/Contains 3 sub-documents/i)).toBeInTheDocument(); - }); -}); diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx deleted file mode 100644 index caf6328e7..000000000 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useTranslation } from 'react-i18next'; - -import { Card, Icon, Text } from '@/components'; -import { useCunninghamTheme } from '@/cunningham'; - -export const AlertPublic = ({ isPublicDoc }: { isPublicDoc: boolean }) => { - const { t } = useTranslation(); - const { spacingsTokens } = useCunninghamTheme(); - - return ( - - - - {isPublicDoc - ? t('Public document') - : t('Document accessible to any connected person')} - - - ); -}; diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx index 4cfcf010a..a25504c7a 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx @@ -67,7 +67,6 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => { > 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 index 9b8ac210e..43c4a7eab 100644 --- 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 @@ -2,16 +2,10 @@ import { useTranslation } from 'react-i18next'; import { Box, HorizontalSeparator } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; -import { - Doc, - LinkReach, - getDocLinkReach, - useIsCollaborativeEditable, -} from '@/docs/doc-management'; +import { Doc, useIsCollaborativeEditable } from '@/docs/doc-management'; import { useResponsiveStore } from '@/stores'; import { AlertNetwork } from './AlertNetwork'; -import { AlertPublic } from './AlertPublic'; import { AlertRestore } from './AlertRestore'; import { DocHeaderInfo } from './DocHeaderInfo'; import { DocTitle } from './DocTitle'; @@ -26,8 +20,6 @@ export const DocHeader = ({ doc }: DocHeaderProps) => { const { isDesktop } = useResponsiveStore(); const { t } = useTranslation(); const { isEditable } = useIsCollaborativeEditable(doc); - const docIsPublic = getDocLinkReach(doc) === LinkReach.PUBLIC; - const docIsAuth = getDocLinkReach(doc) === LinkReach.AUTHENTICATED; const isDeletedDoc = !!doc.deleted_at; return ( @@ -41,9 +33,6 @@ export const DocHeader = ({ doc }: DocHeaderProps) => { > {isDeletedDoc && } {!isEditable && } - {(docIsPublic || docIsAuth) && ( - - )} { - const { isDesktop } = useResponsiveStore(); const { transRole } = useTrans(); const { isEditable } = useIsCollaborativeEditable(doc); const { relativeDate, calculateDaysLeft } = useDate(); const { data: config } = useConfig(); - const childrenCount = doc.numchild ?? 0; - const relativeOnly = relativeDate(doc.updated_at); let dateToDisplay = t('Last update: {{update}}', { @@ -40,40 +39,45 @@ export const DocHeaderInfo = ({ doc }: DocHeaderInfoProps) => { dateToDisplay = `${t('Days remaining:')} ${daysLeft} ${t('days', { count: daysLeft })}`; } - const hasChildren = childrenCount > 0; + return ( + <> + + + {transRole(isEditable ? doc.user_role || doc.link_role : Role.READER)} +  ·  + + + {dateToDisplay} + + + ); +}; - if (isDesktop) { +const VisibilityDoc = ({ doc }: { doc: Doc }) => { + const docIsPublic = getDocLinkReach(doc) === LinkReach.PUBLIC; + const docIsAuth = getDocLinkReach(doc) === LinkReach.AUTHENTICATED; + + if (docIsPublic) { return ( <> - - {transRole(isEditable ? doc.user_role || doc.link_role : Role.READER)} -  ·  - - - {dateToDisplay} - + +  {t('Public')} ·  ); } - return ( - <> - - {hasChildren ? relativeOnly : dateToDisplay} - - {hasChildren && ( - -  •  - {t('Contains {{count}} sub-documents', { - count: childrenCount, - })} - - )} - - ); + if (docIsAuth) { + return ( + <> + +  {t('Internal')} ·  + + ); + } };