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 7a698b027..4812d6d6d 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', () => { // Initially, there is no version await page.getByLabel('Open the document options').click(); - await page.getByRole('menuitem', { name: 'Version history' }).click(); + await page.getByRole('menuitem', { name: 'History' }).click(); await expect(page.getByText('History', { exact: true })).toBeVisible(); const modal = page.getByRole('dialog', { name: 'Version history' }); @@ -64,7 +64,7 @@ test.describe('Doc Version', () => { ).toBeVisible(); await page.getByLabel('Open the document options').click(); - await page.getByRole('menuitem', { name: 'Version history' }).click(); + await page.getByRole('menuitem', { name: 'History' }).click(); await expect(panel).toBeVisible(); await expect(page.getByText('History', { exact: true })).toBeVisible(); @@ -114,9 +114,7 @@ test.describe('Doc Version', () => { await verifyDocName(page, 'Mocked document'); await page.getByLabel('Open the document options').click(); - await expect( - page.getByRole('menuitem', { name: 'Version history' }), - ).toBeHidden(); + await expect(page.getByRole('menuitem', { name: 'History' })).toBeHidden(); }); test('it restores the doc version', async ({ page, browserName }) => { @@ -151,7 +149,7 @@ test.describe('Doc Version', () => { await expect(thread).toBeHidden(); await page.getByLabel('Open the document options').click(); - await page.getByRole('menuitem', { name: 'Version history' }).click(); + await page.getByRole('menuitem', { name: 'History' }).click(); const modal = page.getByRole('dialog', { name: 'Version history' }); const panel = modal.getByLabel('Version list'); diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/copy.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/copy.svg index d99e7bf79..6cd02f095 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/copy.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/copy.svg @@ -1,3 +1,19 @@ - - + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/link.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/link.svg index 787f1e16a..d9dda3818 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/link.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/link.svg @@ -1,3 +1,17 @@ - - + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/shared.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/shared.svg index 7097f5b67..40143f8f2 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/shared.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/shared.svg @@ -1,20 +1,16 @@ - + - diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/trash.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/trash.svg index b63de38cb..17a8d7d85 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/trash.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/trash.svg @@ -1,3 +1,12 @@ - - + + + diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocFloatingBar.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocFloatingBar.tsx index 648caefed..06589d107 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocFloatingBar.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocFloatingBar.tsx @@ -1,11 +1,11 @@ import { Box } from '@/components'; import { CardFloatingBar, FloatingBar } from '@/components/FloatingBar'; +import { DocToolBox } from '@/docs/doc-management/components/DocToolBox'; import { useDocStore } from '@/docs/doc-management/stores/useDocStore'; -import { DocShareButton } from '@/features/docs/doc-share/components/DocShareButton'; +import { DocShareButton } from '@/docs/doc-share/components/DocShareButton'; import { RightPanelCollapseButton } from '@/features/right-panel/components/RightPanelCollapseButton'; import { DocLeftPanelCollapseButton } from './DocLeftPanelCollapseButton'; -import { DocToolBox } from './DocToolBox'; export const DocFloatingBar = () => { const { currentDoc } = useDocStore(); diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBoxLicence.spec.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/__tests__/DocToolBoxLicence.spec.tsx similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBoxLicence.spec.tsx rename to src/frontend/apps/impress/src/features/docs/doc-management/__tests__/DocToolBoxLicence.spec.tsx diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBoxLicenceMIT.spec.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/__tests__/DocToolBoxLicenceMIT.spec.tsx similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBoxLicenceMIT.spec.tsx rename to src/frontend/apps/impress/src/features/docs/doc-management/__tests__/DocToolBoxLicenceMIT.spec.tsx diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx similarity index 79% rename from src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx rename to src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx index 9a5ad9315..ee64a9749 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx @@ -10,31 +10,31 @@ import { useRouter } from 'next/router'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import AddLinkSVG from '@/assets/icons/ui-kit/add_link.svg'; -import ContentCopySVG from '@/assets/icons/ui-kit/content_copy.svg'; -import DeleteSVG from '@/assets/icons/ui-kit/delete.svg'; +import ContentCopyIcon from '@/assets/icons/ui-kit/copy.svg'; import DownloadSVG from '@/assets/icons/ui-kit/download.svg'; -import SharedSVG from '@/assets/icons/ui-kit/group.svg'; import HistorySVG from '@/assets/icons/ui-kit/history.svg'; import KeepSVG from '@/assets/icons/ui-kit/keep.svg'; import KeepOffSVG from '@/assets/icons/ui-kit/keep_off.svg'; import LeaveSVG from '@/assets/icons/ui-kit/leave.svg'; +import LinkIcon from '@/assets/icons/ui-kit/link.svg'; import MoreSVG from '@/assets/icons/ui-kit/more_horiz.svg'; -import { - Doc, - KEY_DOC, - KEY_LIST_DOC, - KEY_LIST_FAVORITE_DOC, - useCopyDocLink, - useCreateFavoriteDoc, - useDeleteFavoriteDoc, - useDocUtils, - useDuplicateDoc, -} from '@/docs/doc-management'; +import SharedIcon from '@/assets/icons/ui-kit/shared.svg'; +import DeleteIcon from '@/assets/icons/ui-kit/trash.svg'; import { usePresenterStore } from '@/docs/doc-presenter/stores'; import { useAuth } from '@/features/auth'; import { useFocusStore, useResponsiveStore } from '@/stores'; +import { + KEY_DOC, + KEY_LIST_DOC, + KEY_LIST_FAVORITE_DOC, + useCreateFavoriteDoc, + useDeleteFavoriteDoc, + useDuplicateDoc, +} from '../api'; +import { useCopyDocLink } from '../hooks'; +import { Doc } from '../types'; + const ModalRemoveDoc = dynamic( () => import('@/docs/doc-management/components/ModalRemoveDoc').then((mod) => ({ @@ -88,7 +88,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { const { t } = useTranslation(); const treeContext = useTreeContext(); const router = useRouter(); - const { isTopRoot } = useDocUtils(doc); const isTopParent = doc.id === treeContext?.root?.id; // it can be a child but not for the current user const { authenticated } = useAuth(); const [openDropdown, setOpenDropdown] = useState(false); @@ -101,8 +100,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { const { restoreFocus, addLastFocus } = useFocusStore(); const { isMobile } = useResponsiveStore(); const copyDocLink = useCopyDocLink(doc.id); - // Deep-link (#2397) and slide/URL sync live in PresenterRoot; here we only - // trigger the manual "Present" action. const openPresenter = usePresenterStore((state) => state.open); const { mutate: duplicateDoc } = useDuplicateDoc({ onSuccess: (data) => { @@ -117,12 +114,53 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { }); const options: DropdownMenuItem[] = [ + { + label: t('Copy link', { + description: 'Dropdown menu item to copy the document link', + }), + icon: , + callback: copyDocLink, + }, + { + label: t('Share', { + description: 'Dropdown menu item to share the document', + }), + icon: , + callback: () => { + setIsModalShareOpen(true); + }, + isHidden: !authenticated, + }, + { type: 'separator' }, + { + label: t('Present', { + description: + 'Dropdown menu item to open the document in presentation mode', + }), + icon: , + callback: () => { + openPresenter(0); + }, + isHidden: Boolean(doc.deleted_at) || isMobile, + testId: `docs-actions-present-${doc.id}`, + }, + { + label: t('Download', { + description: 'Dropdown menu item to download the document', + }), + icon: , + callback: () => { + setIsModalExportOpen(true); + }, + isHidden: !ModalExport, + }, + { type: 'separator' }, { label: doc.is_favorite ? t('Unpin') : t('Pin'), icon: doc.is_favorite ? ( - + ) : ( - + ), callback: () => { if (doc.is_favorite) { @@ -134,50 +172,11 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { isHidden: !doc.abilities.favorite, testId: `docs-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`, }, - { type: 'separator' }, { - label: t('Present'), - icon: , - callback: () => { - openPresenter(0); - }, - isHidden: Boolean(doc.deleted_at) || isMobile, - testId: `docs-actions-present-${doc.id}`, - }, - { - label: t('Copy link'), - icon: , - callback: copyDocLink, - }, - { - label: t('Share'), - icon: , - callback: () => { - setIsModalShareOpen(true); - }, - isHidden: !isTopRoot || !authenticated, - }, - { - label: t('Download'), - icon: , - callback: () => { - setIsModalExportOpen(true); - }, - isHidden: !ModalExport, - }, - { - label: t('Version history'), - icon: , - isDisabled: !doc.abilities.versions_list, - callback: () => { - setIsModalHistoryOpen(true); - }, - isHidden: isMobile || !doc.abilities.versions_list, - showSeparator: true, - }, - { - label: t('Duplicate'), - icon: , + label: t('Duplicate', { + description: 'Dropdown menu item to duplicate the document', + }), + icon: , isDisabled: !doc.abilities.duplicate, callback: () => { duplicateDoc({ @@ -187,11 +186,25 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { }); }, isHidden: !doc.abilities.duplicate, + }, + { type: 'separator' }, + { + label: t('History', { + description: 'Dropdown menu item to view the document history', + }), + icon: , + isDisabled: !doc.abilities.versions_list, + callback: () => { + setIsModalHistoryOpen(true); + }, + isHidden: isMobile || !doc.abilities.versions_list, showSeparator: true, }, { - label: t('Leave'), - icon: , + label: t('Leave', { + description: 'Dropdown menu item to leave the document', + }), + icon: , callback: () => { setIsModalLeaveOpen(true); }, @@ -203,8 +216,10 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { isHidden: !isTopParent, }, { - label: t('Delete'), - icon: , + label: t('Delete', { + description: 'Dropdown menu item to delete the document', + }), + icon: , callback: () => { setIsModalRemoveOpen(true); }, diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/hooks/useCopyCurrentEditorToClipboard.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useCopyCurrentEditorToClipboard.tsx similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-header/hooks/useCopyCurrentEditorToClipboard.tsx rename to src/frontend/apps/impress/src/features/docs/doc-management/hooks/useCopyCurrentEditorToClipboard.tsx