♻️(frontend) replace visibility Alert

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.
2026-09-28 04:25:09 +02:00 · 2026-06-01 10:22:00 +02:00
parent e8cc19b74e
commit 882c2ac979
8 changed files with 54 additions and 173 deletions
@@ -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(
@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM11 19.95V18C10.45 18 9.97917 17.8042 9.5875 17.4125C9.19583 17.0208 9 16.55 9 16V15L4.2 10.2C4.15 10.5 4.10417 10.8 4.0625 11.1C4.02083 11.4 4 11.7 4 12C4 14.0167 4.6625 15.7833 5.9875 17.3C7.3125 18.8167 8.98333 19.7 11 19.95ZM17.9 17.4C18.2333 17.0333 18.5333 16.6375 18.8 16.2125C19.0667 15.7875 19.2875 15.3458 19.4625 14.8875C19.6375 14.4292 19.7708 13.9583 19.8625 13.475C19.9542 12.9917 20 12.5 20 12C20 10.3667 19.5458 8.875 18.6375 7.525C17.7292 6.175 16.5167 5.2 15 4.6V5C15 5.55 14.8042 6.02083 14.4125 6.4125C14.0208 6.80417 13.55 7 13 7H11V9C11 9.28333 10.9042 9.52083 10.7125 9.7125C10.5208 9.90417 10.2833 10 10 10H8V12H14C14.2833 12 14.5208 12.0958 14.7125 12.2875C14.9042 12.4792 15 12.7167 15 13V16H16C16.4333 16 16.825 16.1292 17.175 16.3875C17.525 16.6458 17.7667 16.9833 17.9 17.4Z" fill="#222631"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM11 19.95V18C10.45 18 9.97917 17.8042 9.5875 17.4125C9.19583 17.0208 9 16.55 9 16V15L4.2 10.2C4.15 10.5 4.10417 10.8 4.0625 11.1C4.02083 11.4 4 11.7 4 12C4 14.0167 4.6625 15.7833 5.9875 17.3C7.3125 18.8167 8.98333 19.7 11 19.95ZM17.9 17.4C18.2333 17.0333 18.5333 16.6375 18.8 16.2125C19.0667 15.7875 19.2875 15.3458 19.4625 14.8875C19.6375 14.4292 19.7708 13.9583 19.8625 13.475C19.9542 12.9917 20 12.5 20 12C20 10.3667 19.5458 8.875 18.6375 7.525C17.7292 6.175 16.5167 5.2 15 4.6V5C15 5.55 14.8042 6.02083 14.4125 6.4125C14.0208 6.80417 13.55 7 13 7H11V9C11 9.28333 10.9042 9.52083 10.7125 9.7125C10.5208 9.90417 10.2833 10 10 10H8V12H14C14.2833 12 14.5208 12.0958 14.7125 12.2875C14.9042 12.4792 15 12.7167 15 13V16H16C16.4333 16 16.825 16.1292 17.175 16.3875C17.525 16.6458 17.7667 16.9833 17.9 17.4Z"
+    fill="currentColor"
+  />
 </svg>
@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.32083 2.7875 8.1125C3.3125 6.90417 4.02917 5.84583 4.9375 4.9375C5.84583 4.02917 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C12.5333 2 13.0458 2.0375 13.5375 2.1125C14.0292 2.1875 14.5167 2.3 15 2.45V5C15 5.55 14.8042 6.02083 14.4125 6.4125C14.0208 6.80417 13.55 7 13 7H11V9C11 9.28333 10.9042 9.52083 10.7125 9.7125C10.5208 9.90417 10.2833 10 10 10H8V12H14C14.2833 12 14.5208 12.0958 14.7125 12.2875C14.9042 12.4792 15 12.7167 15 13V16H16C16.45 16 16.8458 16.1333 17.1875 16.4C17.5292 16.6667 17.7667 17 17.9 17.4C18.55 16.6667 19.0625 15.8458 19.4375 14.9375C19.8125 14.0292 20 13.05 20 12C20 11.8167 19.9917 11.65 19.975 11.5C19.9583 11.35 19.9333 11.1833 19.9 11H21.95C21.9833 11.1833 22 11.35 22 11.5V12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.9708 18.1542 19.0625 19.0625C18.1542 19.9708 17.0958 20.6875 15.8875 21.2125C14.6792 21.7375 13.3833 22 12 22ZM11 19.95V18C10.45 18 9.97917 17.8042 9.5875 17.4125C9.19583 17.0208 9 16.55 9 16V15L4.2 10.2C4.15 10.5 4.10417 10.8 4.0625 11.1C4.02083 11.4 4 11.7 4 12C4 14.0667 4.67083 15.8458 6.0125 17.3375C7.35417 18.8292 9.01667 19.7 11 19.95ZM18 9C17.7167 9 17.4792 8.90417 17.2875 8.7125C17.0958 8.52083 17 8.28333 17 8V5C17 4.71667 17.0958 4.47917 17.2875 4.2875C17.4792 4.09583 17.7167 4 18 4V3C18 2.45 18.1958 1.97917 18.5875 1.5875C18.9792 1.19583 19.45 1 20 1C20.55 1 21.0208 1.19583 21.4125 1.5875C21.8042 1.97917 22 2.45 22 3V4C22.2833 4 22.5208 4.09583 22.7125 4.2875C22.9042 4.47917 23 4.71667 23 5V8C23 8.28333 22.9042 8.52083 22.7125 8.7125C22.5208 8.90417 22.2833 9 22 9H18ZM19 4H21V3C21 2.71667 20.9042 2.47917 20.7125 2.2875C20.5208 2.09583 20.2833 2 20 2C19.7167 2 19.4792 2.09583 19.2875 2.2875C19.0958 2.47917 19 2.71667 19 3V4Z" fill="#222631"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.32083 2.7875 8.1125C3.3125 6.90417 4.02917 5.84583 4.9375 4.9375C5.84583 4.02917 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C12.5333 2 13.0458 2.0375 13.5375 2.1125C14.0292 2.1875 14.5167 2.3 15 2.45V5C15 5.55 14.8042 6.02083 14.4125 6.4125C14.0208 6.80417 13.55 7 13 7H11V9C11 9.28333 10.9042 9.52083 10.7125 9.7125C10.5208 9.90417 10.2833 10 10 10H8V12H14C14.2833 12 14.5208 12.0958 14.7125 12.2875C14.9042 12.4792 15 12.7167 15 13V16H16C16.45 16 16.8458 16.1333 17.1875 16.4C17.5292 16.6667 17.7667 17 17.9 17.4C18.55 16.6667 19.0625 15.8458 19.4375 14.9375C19.8125 14.0292 20 13.05 20 12C20 11.8167 19.9917 11.65 19.975 11.5C19.9583 11.35 19.9333 11.1833 19.9 11H21.95C21.9833 11.1833 22 11.35 22 11.5V12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.9708 18.1542 19.0625 19.0625C18.1542 19.9708 17.0958 20.6875 15.8875 21.2125C14.6792 21.7375 13.3833 22 12 22ZM11 19.95V18C10.45 18 9.97917 17.8042 9.5875 17.4125C9.19583 17.0208 9 16.55 9 16V15L4.2 10.2C4.15 10.5 4.10417 10.8 4.0625 11.1C4.02083 11.4 4 11.7 4 12C4 14.0667 4.67083 15.8458 6.0125 17.3375C7.35417 18.8292 9.01667 19.7 11 19.95ZM18 9C17.7167 9 17.4792 8.90417 17.2875 8.7125C17.0958 8.52083 17 8.28333 17 8V5C17 4.71667 17.0958 4.47917 17.2875 4.2875C17.4792 4.09583 17.7167 4 18 4V3C18 2.45 18.1958 1.97917 18.5875 1.5875C18.9792 1.19583 19.45 1 20 1C20.55 1 21.0208 1.19583 21.4125 1.5875C21.8042 1.97917 22 2.45 22 3V4C22.2833 4 22.5208 4.09583 22.7125 4.2875C22.9042 4.47917 23 4.71667 23 5V8C23 8.28333 22.9042 8.52083 22.7125 8.7125C22.5208 8.90417 22.2833 9 22 9H18ZM19 4H21V3C21 2.71667 20.9042 2.47917 20.7125 2.2875C20.5208 2.09583 20.2833 2 20 2C19.7167 2 19.4792 2.09583 19.2875 2.2875C19.0958 2.47917 19 2.71667 19 3V4Z"
+    fill="currentColor"
+  />
 </svg>
@@ -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<any>('../../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(<DocHeaderInfo doc={doc} />, { wrapper: AppWrapper });
-
-    expect(screen.getByText(/Contains 3 sub-documents/i)).toBeInTheDocument();
-  });
-});
@@ -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 (
-    <Card
-      role="presentation"
-      $radius={spacingsTokens['3xs']}
-      $direction="row"
-      $padding="xs"
-      $flex={1}
-      $align="center"
-      $gap={spacingsTokens['2xs']}
-      $theme="brand"
-    >
-      <Icon
-        $withThemeInherited
-        data-testid="public-icon"
-        iconName={isPublicDoc ? 'public' : 'vpn_lock'}
-      />
-      <Text $withThemeInherited $weight="500">
-        {isPublicDoc
-          ? t('Public document')
-          : t('Document accessible to any connected person')}
-      </Text>
-    </Card>
-  );
-};
@@ -67,7 +67,6 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => {
      >
        <Icon
          $withThemeInherited
-          data-testid="public-icon"
          iconName="delete"
          variant="symbols-outlined"
        />
@@ -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 && <AlertRestore doc={doc} />}
        {!isEditable && <AlertNetwork />}
-        {(docIsPublic || docIsAuth) && (
-          <AlertPublic isPublicDoc={docIsPublic} />
-        )}
        <Box
          $direction="row"
          $align="center"
@@ -1,30 +1,29 @@
 import { t } from 'i18next';
-import React from 'react';

+import PublicSVG from '@/assets/icons/ui-kit/public.svg';
+import ProtedtedSVG from '@/assets/icons/ui-kit/vpn_lock.svg';
 import { Text } from '@/components';
 import { useConfig } from '@/core';
 import {
  Doc,
+  LinkReach,
  Role,
+  getDocLinkReach,
  useIsCollaborativeEditable,
  useTrans,
 } from '@/docs/doc-management';
 import { useDate } from '@/hooks';
-import { useResponsiveStore } from '@/stores';

 interface DocHeaderInfoProps {
  doc: Doc;
 }

 export const DocHeaderInfo = ({ doc }: DocHeaderInfoProps) => {
-  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 (
+    <>
+      <Text
+        $variation="tertiary"
+        $size="s"
+        $weight="bold"
+        $theme={isEditable ? 'neutral' : 'warning'}
+        $direction="row"
+      >
+        <VisibilityDoc doc={doc} />
+        {transRole(isEditable ? doc.user_role || doc.link_role : Role.READER)}
+        &nbsp;·&nbsp;
+      </Text>
+      <Text $variation="tertiary" $size="s">
+        {dateToDisplay}
+      </Text>
+    </>
+  );
+};

-  if (isDesktop) {
+const VisibilityDoc = ({ doc }: { doc: Doc }) => {
+  const docIsPublic = getDocLinkReach(doc) === LinkReach.PUBLIC;
+  const docIsAuth = getDocLinkReach(doc) === LinkReach.AUTHENTICATED;
+
+  if (docIsPublic) {
    return (
      <>
-        <Text
-          $variation="tertiary"
-          $size="s"
-          $weight="bold"
-          $theme={isEditable ? 'neutral' : 'warning'}
-        >
-          {transRole(isEditable ? doc.user_role || doc.link_role : Role.READER)}
-          &nbsp;·&nbsp;
-        </Text>
-        <Text $variation="tertiary" $size="s">
-          {dateToDisplay}
-        </Text>
+        <PublicSVG aria-hidden="true" width="16" height="16" />
+        &nbsp;{t('Public')}&nbsp;·&nbsp;
      </>
    );
  }

-  return (
-    <>
-      <Text $variation="tertiary" $size="s">
-        {hasChildren ? relativeOnly : dateToDisplay}
-      </Text>
-      {hasChildren && (
-        <Text $variation="tertiary" $size="s">
-          &nbsp;•&nbsp;
-          {t('Contains {{count}} sub-documents', {
-            count: childrenCount,
-          })}
-        </Text>
-      )}
-    </>
-  );
+  if (docIsAuth) {
+    return (
+      <>
+        <ProtedtedSVG aria-hidden="true" width="16" height="16" />
+        &nbsp;{t('Internal')}&nbsp;·&nbsp;
+      </>
+    );
+  }
 };