{ return ( - - - - - - - + + + + + {}}> + + + + + + ); }; const setup = props => render(); - describe('BrowseStep', () => { afterEach(() => { jest.clearAllMocks(); @@ -101,14 +115,12 @@ describe('BrowseStep', () => { it('renders and match snapshot', () => { const { container } = setup(); - expect(container).toMatchSnapshot(); }); it('calls onAddAsset callback', () => { const spy = jest.fn(); const { getByText } = setup({ onAddAsset: spy, folders: [] }); - fireEvent.click(getByText('Add new assets')); expect(spy).toHaveBeenCalled(); }); @@ -116,19 +128,16 @@ describe('BrowseStep', () => { it('calls onChangeFolder callback', () => { const spy = jest.fn(); const { getByRole } = setup({ onChangeFolder: spy }); - fireEvent.click( getByRole('button', { name: /folder 1 : 1 folder, 1 asset/i, }) ); - expect(spy).toHaveBeenCalled(); }); it('does display empty state upload first assets if no folder or assets', () => { setup({ folders: [], assets: [] }); - expect(screen.getByText('Upload your first assets...')).toBeInTheDocument(); }); @@ -138,7 +147,6 @@ describe('BrowseStep', () => { assets: [], queryObject: { page: 1, pageSize: 10, filters: { $and: [] }, _q: 'true' }, }); - expect(screen.getByText('There are no assets with the applied filters')).toBeInTheDocument(); }); @@ -148,7 +156,6 @@ describe('BrowseStep', () => { assets: [], queryObject: { page: 1, pageSize: 10, filters: { $and: [{ mime: 'audio' }] }, _q: '' }, }); - expect(screen.getByText('Filters')).toBeInTheDocument(); }); @@ -158,7 +165,6 @@ describe('BrowseStep', () => { assets: FIXTURE_ASSETS, queryObject: { page: 1, pageSize: 10, filters: { $and: [] }, _q: 'true' }, }); - expect(screen.queryByText('Assets')).not.toBeInTheDocument(); }); @@ -166,7 +172,6 @@ describe('BrowseStep', () => { setup({ queryObject: { page: 1, pageSize: 10, filters: { $and: [] }, _q: 'true' }, }); - expect(screen.queryByText('Folders')).not.toBeInTheDocument(); }); @@ -175,7 +180,7 @@ describe('BrowseStep', () => { assets: FIXTURE_ASSETS, }); - expect(screen.getByText('Folders')).toBeInTheDocument(); - expect(screen.getByText('Assets')).toBeInTheDocument(); + expect(screen.getByText('Folders (1)')).toBeInTheDocument(); + expect(screen.getByText('Assets (1)')).toBeInTheDocument(); }); }); diff --git a/packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js b/packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js deleted file mode 100644 index 2c1726d011..0000000000 --- a/packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; -import { useIntl } from 'react-intl'; -import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs'; -import { ModalHeader } from '@strapi/design-system/ModalLayout'; -import { Stack } from '@strapi/design-system/Stack'; -import { Icon } from '@strapi/design-system/Icon'; -import ArrowLeft from '@strapi/icons/ArrowLeft'; -import { findRecursiveFolderMetadatas, getTrad } from '../../utils'; -import { useFolderStructure } from '../../hooks/useFolderStructure'; - -const BackButton = styled.button` - height: ${({ theme }) => theme.spaces[4]}; - color: ${({ theme }) => theme.colors.neutral500}; - - &:hover, - &:focus { - color: ${({ theme }) => theme.colors.neutral600}; - } -`; - -const BackIcon = styled(Icon)` - path { - fill: currentColor; - } -`; - -export const DialogHeader = ({ currentFolder, onChangeFolder, canRead }) => { - const { formatMessage } = useIntl(); - - const { data, isLoading } = useFolderStructure({ - enabled: canRead, - }); - - const folderMetadatas = - !isLoading && Array.isArray(data) && findRecursiveFolderMetadatas(data[0], currentFolder); - const folderLabel = - folderMetadatas?.currentFolderLabel && - (folderMetadatas.currentFolderLabel.length > 60 - ? `${folderMetadatas.currentFolderLabel.slice(0, 60)}...` - : folderMetadatas.currentFolderLabel); - - return ( - - - {currentFolder && ( - onChangeFolder(folderMetadatas?.parentId)} - > - - - )} - - - {formatMessage({ - id: getTrad('header.actions.add-assets'), - defaultMessage: 'Add new assets', - })} - - {folderLabel && {folderLabel}} - - - - ); -}; - -DialogHeader.defaultProps = { - currentFolder: undefined, - onChangeFolder: undefined, -}; - -DialogHeader.propTypes = { - canRead: PropTypes.bool.isRequired, - currentFolder: PropTypes.number, - onChangeFolder: PropTypes.func, -}; diff --git a/packages/core/upload/admin/src/components/AssetDialog/index.js b/packages/core/upload/admin/src/components/AssetDialog/index.js index f4d13c42cf..d27c7cadae 100644 --- a/packages/core/upload/admin/src/components/AssetDialog/index.js +++ b/packages/core/upload/admin/src/components/AssetDialog/index.js @@ -1,17 +1,17 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { ModalLayout, ModalBody } from '@strapi/design-system/ModalLayout'; +import { useIntl } from 'react-intl'; +import { ModalLayout, ModalBody, ModalHeader } from '@strapi/design-system/ModalLayout'; import { Flex } from '@strapi/design-system/Flex'; import { Button } from '@strapi/design-system/Button'; import { Divider } from '@strapi/design-system/Divider'; -import { useIntl } from 'react-intl'; +import { Typography } from '@strapi/design-system/Typography'; import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs'; import { Badge } from '@strapi/design-system/Badge'; import { Loader } from '@strapi/design-system/Loader'; import { Stack } from '@strapi/design-system/Stack'; import { NoPermissions, AnErrorOccurred, useSelectionState, pxToRem } from '@strapi/helper-plugin'; - import { getTrad, containsAssetFilter } from '../../utils'; import { SelectedStep } from './SelectedStep'; import { BrowseStep } from './BrowseStep'; @@ -21,7 +21,6 @@ import { useFolders } from '../../hooks/useFolders'; import useModalQueryParams from '../../hooks/useModalQueryParams'; import { AssetDefinition } from '../../constants'; import getAllowedFiles from '../../utils/getAllowedFiles'; -import { DialogHeader } from './DialogHeader'; import { DialogFooter } from './DialogFooter'; import { EditAssetDialog } from '../EditAssetDialog'; import { moveElement } from '../../utils/moveElement'; @@ -55,6 +54,7 @@ export const AssetDialog = ({ canCopyLink, canDownload, } = useMediaLibraryPermissions(); + const [ { queryObject }, { @@ -66,11 +66,13 @@ export const AssetDialog = ({ onChangeFolder: onChangeFolderParam, }, ] = useModalQueryParams({ folder: folderId }); + const { data: { pagination, results: assets } = {}, isLoading: isLoadingAssets, error: errorAssets, } = useAssets({ skipWhen: !canRead, query: queryObject }); + const { data: folders, isLoading: isLoadingFolders, error: errorFolders } = useFolders({ enabled: canRead && !containsAssetFilter(queryObject) && pagination?.page === 1, query: queryObject, @@ -84,6 +86,7 @@ export const AssetDialog = ({ const [initialSelectedTabIndex, setInitialSelectedTabIndex] = useState( selectedAssets.length > 0 ? 1 : 0 ); + const handleSelectAllAssets = () => { const hasAllAssets = assets.every( asset => selectedAssets.findIndex(curr => curr.id === asset.id) !== -1 @@ -97,6 +100,7 @@ export const AssetDialog = ({ return multiple ? selectAll(allowedAssets) : undefined; }; + const handleSelectAsset = asset => { return multiple ? selectOne(asset) : selectOnly(asset); }; @@ -107,7 +111,14 @@ export const AssetDialog = ({ if (isLoading) { return ( - + + + {formatMessage({ + id: getTrad('header.actions.add-assets'), + defaultMessage: 'Add new assets', + })} + + {formatMessage({ @@ -124,7 +135,14 @@ export const AssetDialog = ({ if (hasError) { return ( - + + + {formatMessage({ + id: getTrad('header.actions.add-assets'), + defaultMessage: 'Add new assets', + })} + + @@ -134,7 +152,14 @@ export const AssetDialog = ({ if (!canRead) { return ( - + + + {formatMessage({ + id: getTrad('header.actions.add-assets'), + defaultMessage: 'Add new assets', + })} + + @@ -168,7 +193,6 @@ export const AssetDialog = ({ const offset = destIndex - hoverIndex; const orderedAssetsClone = selectedAssets.slice(); const nextAssets = moveElement(orderedAssetsClone, hoverIndex, offset); - setSelections(nextAssets); }; @@ -179,11 +203,14 @@ export const AssetDialog = ({ return ( - + + + {formatMessage({ + id: getTrad('header.actions.add-assets'), + defaultMessage: 'Add new assets', + })} + + {selectedAssets.length} - - onAddAsset({ folderId: queryObject?.folder })}> {formatMessage({ id: getTrad('modal.upload-list.sub-header.button'), @@ -238,6 +263,7 @@ export const AssetDialog = ({ allowedTypes={allowedTypes} assets={assets} canCreate={canCreate} + canRead={canRead} folders={folders} onSelectAsset={handleSelectAsset} selectedAssets={selectedAssets} @@ -268,7 +294,6 @@ export const AssetDialog = ({ - onValidate(selectedAssets)} /> ); diff --git a/packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js b/packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js deleted file mode 100644 index 1cb6f66993..0000000000 --- a/packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import { ThemeProvider, lightTheme } from '@strapi/design-system'; -import { IntlProvider } from 'react-intl'; -import { QueryClientProvider, QueryClient } from 'react-query'; -import { fireEvent, render, screen } from '@testing-library/react'; -import { useFolderStructure } from '../../../hooks/useFolderStructure'; -import { DialogHeader } from '../DialogHeader'; - -jest.mock('../../../hooks/useFolderStructure'); - -const setup = props => { - const withDefaults = { - canRead: true, - currentFolder: null, - onChangeFolder: jest.fn(), - ...props, - }; - - const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retry: false, - refetchOnWindowFocus: false, - }, - }, - }); - - return render( - - - - - - - - ); -}; - -describe('Upload || components || DialogHeader', () => { - it('should render folder name and back button', () => { - const handleChangeFolderSpy = jest.fn(); - const { queryByText } = setup({ currentFolder: 2, onChangeFolder: handleChangeFolderSpy }); - - expect(queryByText('second child')).toBeInTheDocument(); - - const goBackButton = screen.getByLabelText('Go back'); - expect(goBackButton).toBeInTheDocument(); - - fireEvent.click(goBackButton); - expect(handleChangeFolderSpy).toHaveBeenCalled(); - }); - - it('should truncate long folder name', () => { - useFolderStructure.mockReturnValueOnce({ - isLoading: false, - error: null, - data: [ - { - value: null, - label: 'Media Library', - children: [ - { - value: 1, - label: 'This is a really really long folder name that should be truncated', - children: [], - }, - ], - }, - ], - }); - const { queryByText } = setup({ currentFolder: 1 }); - - expect( - queryByText('This is a really really long folder name that should be trun...') - ).toBeInTheDocument(); - }); - - it('should not render folder name and back button if the current folder is root', () => { - const { queryByText } = setup(); - - expect(queryByText('Cats')).not.toBeInTheDocument(); - expect(screen.queryByLabelText('Go back')).not.toBeInTheDocument(); - }); - - it('should not attempt to fetch the folder structure, if the user does not have permissions', () => { - const spy = jest.fn().mockReturnValueOnce({ - isLoading: false, - error: null, - }); - useFolderStructure.mockImplementation(spy); - - setup({ canRead: false }); - - expect(spy).toHaveBeenCalledWith({ enabled: false }); - }); -}); diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js index 86448a6bd8..868a4dccef 100644 --- a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js +++ b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { NavLink } from 'react-router-dom'; import { @@ -9,7 +10,7 @@ import { import { CrumbSimpleMenuAsync } from './CrumbSimpleMenuAsync'; import { BreadcrumbsDefinition } from '../../constants'; -export const Breadcrumbs = ({ breadcrumbs, ...props }) => ( +export const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props }) => ( {breadcrumbs.map((crumb, index) => { if (Array.isArray(crumb)) { @@ -19,13 +20,23 @@ export const Breadcrumbs = ({ breadcrumbs, ...props }) => ( .splice(index + 1, breadcrumbs.length - 1) .map(parent => parent.id)} key={`breadcrumb-${crumb?.id ?? 'menu'}`} + currentFolderId={currentFolderId} + onChangeFolder={onChangeFolder} /> ); } - if (crumb.href) { + const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined; + + if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) { return ( - + onChangeFolder(crumb.id))} + > {crumb.label} ); @@ -43,6 +54,13 @@ export const Breadcrumbs = ({ breadcrumbs, ...props }) => ( ); +Breadcrumbs.defaultProps = { + currentFolderId: undefined, + onChangeFolder: undefined, +}; + Breadcrumbs.propTypes = { breadcrumbs: BreadcrumbsDefinition.isRequired, + currentFolderId: PropTypes.number, + onChangeFolder: PropTypes.func, }; diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js b/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js index 75e01fe59e..80e5b57d1b 100644 --- a/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js +++ b/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js @@ -2,7 +2,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { NavLink, useLocation } from 'react-router-dom'; import { useIntl } from 'react-intl'; - import { useQueryParams } from '@strapi/helper-plugin'; import { CrumbSimpleMenu } from '@strapi/design-system/v2/Breadcrumbs'; import { MenuItem } from '@strapi/design-system/v2/SimpleMenu'; @@ -10,14 +9,14 @@ import { Loader } from '@strapi/design-system/Loader'; import { useFolderStructure } from '../../hooks/useFolderStructure'; import { getFolderParents, getFolderURL, getTrad } from '../../utils'; -export const CrumbSimpleMenuAsync = ({ parentsToOmit }) => { +export const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }) => { const [shouldFetch, setShouldFetch] = useState(false); const { data, isLoading } = useFolderStructure({ enabled: shouldFetch }); const { pathname } = useLocation(); const [{ query }] = useQueryParams(); const { formatMessage } = useIntl(); - const allAscendants = data && getFolderParents(data, Number(query?.folder)); + const allAscendants = data && getFolderParents(data, currentFolderId); const filteredAscendants = allAscendants && allAscendants.filter( @@ -46,6 +45,19 @@ export const CrumbSimpleMenuAsync = ({ parentsToOmit }) => { )} {filteredAscendants && filteredAscendants.map(ascendant => { + if (onChangeFolder) { + return ( + onChangeFolder(ascendant.id)} + key={ascendant.id} + > + {ascendant.label} + + ); + } + const url = getFolderURL(pathname, query, ascendant); return ( @@ -59,9 +71,13 @@ export const CrumbSimpleMenuAsync = ({ parentsToOmit }) => { }; CrumbSimpleMenuAsync.defaultProps = { + currentFolderId: undefined, + onChangeFolder: undefined, parentsToOmit: [], }; CrumbSimpleMenuAsync.propTypes = { + currentFolderId: PropTypes.number, + onChangeFolder: PropTypes.func, parentsToOmit: PropTypes.arrayOf(PropTypes.number), }; diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js b/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js index 65e52017ae..32ce79bfef 100644 --- a/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js +++ b/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js @@ -49,7 +49,7 @@ const setup = props => describe('Media Library | Breadcrumbs', () => { test('should render and match snapshot', () => { - const { container } = setup(); + const { container } = setup({ currentFolderId: 22 }); expect(container.querySelector('nav')).toBeInTheDocument(); expect(screen.getByText('parent folder')).toBeInTheDocument(); @@ -59,7 +59,7 @@ describe('Media Library | Breadcrumbs', () => { }); test('should store other ascendants in simple menu', async () => { - const { getByRole } = setup(); + const { getByRole } = setup({ currentFolderId: 22 }); const simpleMenuButton = getByRole('button', { name: /get more ascendants folders/i }); fireEvent.mouseDown(simpleMenuButton); diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js index 09b4709a07..ac2f4d5fae 100644 --- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js +++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js @@ -33,7 +33,7 @@ import { FolderList } from '../../components/FolderList'; import SortPicker from '../../components/SortPicker'; import { useAssets } from '../../hooks/useAssets'; import { useFolders } from '../../hooks/useFolders'; -import { getTrad, containsAssetFilter, getBreadcrumbData, getFolderURL } from '../../utils'; +import { getTrad, containsAssetFilter, getBreadcrumbDataML, getFolderURL } from '../../utils'; import { PaginationFooter } from '../../components/PaginationFooter'; import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions'; import { useFolder } from '../../hooks/useFolder'; @@ -151,7 +151,7 @@ export const MediaLibrary = () => { { const { formatMessage } = useIntl(); const { pathname } = useLocation(); @@ -45,6 +45,7 @@ export const Header = ({ defaultMessage: 'Folders navigation', })} breadcrumbs={breadcrumbs} + currentFolderId={folder?.id} /> ) } diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js new file mode 100644 index 0000000000..6ca26c1698 --- /dev/null +++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js @@ -0,0 +1,30 @@ +const getBreadcrumbDataML = folder => { + let data = [ + { + id: null, + label: 'Media Library', + }, + ]; + + if (folder?.parent?.parent) { + data.push([]); + } + + if (folder?.parent) { + data.push({ + id: folder.parent.id, + label: folder.parent.name, + }); + } + + if (folder) { + data.push({ + id: folder.id, + label: folder.name, + }); + } + + return data; +}; + +export default getBreadcrumbDataML; diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbData.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js similarity index 84% rename from packages/core/upload/admin/src/utils/getBreadcrumbData.js rename to packages/core/upload/admin/src/utils/getBreadcrumbDataML.js index 1f3f737b8c..f653145d42 100644 --- a/packages/core/upload/admin/src/utils/getBreadcrumbData.js +++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js @@ -1,6 +1,6 @@ import getFolderURL from './getFolderURL'; -const getBreadcrumbData = (folder, { pathname, query }) => { +const getBreadcrumbDataML = (folder, { pathname, query }) => { let data = [ { id: null, @@ -31,4 +31,4 @@ const getBreadcrumbData = (folder, { pathname, query }) => { return data; }; -export default getBreadcrumbData; +export default getBreadcrumbDataML; diff --git a/packages/core/upload/admin/src/utils/index.js b/packages/core/upload/admin/src/utils/index.js index a46dde72dd..94fe1b40ec 100644 --- a/packages/core/upload/admin/src/utils/index.js +++ b/packages/core/upload/admin/src/utils/index.js @@ -5,7 +5,8 @@ export { default as getTrad } from './getTrad'; export { default as findRecursiveFolderByValue } from './findRecursiveFolderByValue'; export { default as findRecursiveFolderMetadatas } from './findRecursiveFolderMetadatas'; export { default as containsAssetFilter } from './containsAssetFilter'; -export { default as getBreadcrumbData } from './getBreadcrumbData'; +export { default as getBreadcrumbDataML } from './getBreadcrumbDataML'; +export { default as getBreadcrumbDataCM } from './getBreadcrumbDataCM'; export { default as getFolderURL } from './getFolderURL'; export { default as getFolderParents } from './getFolderParents'; export * from './formatDuration'; diff --git a/packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js similarity index 85% rename from packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js rename to packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js index c5e8c84eee..0506effa1e 100644 --- a/packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js +++ b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js @@ -1,4 +1,4 @@ -import { getBreadcrumbData } from '..'; +import { getBreadcrumbDataML } from '..'; const FIXTURE_PATHNAME = '/media-library'; const FIXTURE_QUERY = { @@ -10,10 +10,10 @@ const FIXTURE_FOLDER = { name: 'first-level', }; -describe('getBreadcrumData', () => { +describe('getBreadcrumbDataML', () => { test('return one item at the root of the media library', () => { expect( - getBreadcrumbData(null, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }) + getBreadcrumbDataML(null, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }) ).toStrictEqual([ { href: undefined, @@ -25,7 +25,7 @@ describe('getBreadcrumData', () => { test('returns two items for the first level of the media library', () => { expect( - getBreadcrumbData(FIXTURE_FOLDER, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }) + getBreadcrumbDataML(FIXTURE_FOLDER, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }) ).toStrictEqual([ { href: '/media-library?some=thing', @@ -42,7 +42,7 @@ describe('getBreadcrumData', () => { test('returns three items for the second level of the media library', () => { expect( - getBreadcrumbData( + getBreadcrumbDataML( { ...FIXTURE_FOLDER, parent: { id: 2, name: 'second-level' } }, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY } ) @@ -68,7 +68,7 @@ describe('getBreadcrumData', () => { test('returns four items for the third level of the media library', () => { expect( - getBreadcrumbData( + getBreadcrumbDataML( { ...FIXTURE_FOLDER, parent: { id: 2, name: 'second-level', parent: { id: 3, name: 'third-level' } },