diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts index bc759eddd..59096517b 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts @@ -31,6 +31,22 @@ test.describe('Doc Create', () => { await expect(docsGrid.getByText(docTitle)).toBeVisible(); }); + test('it creates a sub doc from the submenu "New" button', async ({ + page, + browserName, + }) => { + await createDoc(page, 'my-new-button-sub-doc', browserName, 1); + + await page.getByLabel('Open new document options').click(); + await page.getByRole('menuitem', { name: 'New sub-doc' }).click(); + + const input = page.getByRole('textbox', { name: 'Document title' }); + await expect(input).toHaveText('', { timeout: 10000 }); + await expect( + page.locator('.c__tree-view--row-content').getByText('Untitled document'), + ).toBeVisible(); + }); + test('it creates a sub doc from slash menu editor', async ({ page, browserName, diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/doc-new-subdoc.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/doc-new-subdoc.svg new file mode 100644 index 000000000..6cc7f8b4a --- /dev/null +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/doc-new-subdoc.svg @@ -0,0 +1,10 @@ + + + + diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx index fc593a49a..f8d685428 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx @@ -7,10 +7,13 @@ import { useTranslation } from 'react-i18next'; import { Text } from '@/components'; import { useConfig } from '@/core/config/api/useConfig'; import ArrowDownIcon from '@/icons/arrow-drop-down.svg'; +import SubDocIcon from '@/icons/doc-new-subdoc.svg'; import PlusIcon from '@/icons/doc-plus.svg'; import UploadIcon from '@/icons/upload-arrow.svg'; +import { useCreateChildDoc } from '../api/useCreateChildDoc'; import { useImport } from '../hooks/useImport'; +import { useDocStore } from '../stores/useDocStore'; interface NewDocButtonProps { onClose?: () => void; @@ -55,6 +58,7 @@ export const NewDocButton = ({ onClose }: NewDocButtonProps) => { export function DropdownArrow() { const router = useRouter(); const [isMenuOpen, setIsMenuOpen] = useState(false); + const { currentDoc } = useDocStore(); const { t } = useTranslation(); const { getInputProps, @@ -66,6 +70,11 @@ export function DropdownArrow() { void router.push(`/docs/${doc.id}/`); }, }); + const { mutate: createChildDoc } = useCreateChildDoc({ + onSuccess: (newDoc) => { + void router.push(`/docs/${newDoc.id}`); + }, + }); const toggleMenu = useCallback(() => { setIsMenuOpen((open) => !open); @@ -73,6 +82,18 @@ export function DropdownArrow() { const options = useMemo( () => [ + { + label: t('New sub-doc'), + icon: