-
-
Notifications
You must be signed in to change notification settings - Fork 7.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(cm): set up history page (#19309)
* feat(cm): set up history page * feat: add injected component * fix: use React.useId * fix: typo Co-authored-by: markkaylor <mark.kaylor@strapi.io> --------- Co-authored-by: markkaylor <mark.kaylor@strapi.io>
- Loading branch information
1 parent
df45601
commit ea0fc28
Showing
11 changed files
with
243 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
packages/core/admin/admin/src/content-manager/history/components/InjectedLink.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import * as React from 'react'; | ||
|
||
import { LinkButton } from '@strapi/design-system/v2'; | ||
import { useQueryParams } from '@strapi/helper-plugin'; | ||
import { stringify } from 'qs'; | ||
import { NavLink } from 'react-router-dom'; | ||
|
||
/** | ||
* This is a temporary component to easily access the history page. | ||
* TODO: delete it when the document actions API is ready | ||
*/ | ||
|
||
const InjectedLink = () => { | ||
const [{ query }] = useQueryParams<{ plugins?: Record<string, unknown> }>(); | ||
const pluginsQueryParams = stringify({ plugins: query.plugins }, { encode: false }); | ||
|
||
return ( | ||
// @ts-expect-error - types are not inferred correctly through the as prop. | ||
<LinkButton as={NavLink} variant="primary" to={`history?${pluginsQueryParams}`}> | ||
History | ||
</LinkButton> | ||
); | ||
}; | ||
|
||
export { InjectedLink }; |
44 changes: 44 additions & 0 deletions
44
packages/core/admin/admin/src/content-manager/history/components/VersionDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import * as React from 'react'; | ||
|
||
import { ContentLayout, HeaderLayout, Main, Typography } from '@strapi/design-system'; | ||
import { Link } from '@strapi/design-system/v2'; | ||
import { ArrowLeft } from '@strapi/icons'; | ||
import { useIntl } from 'react-intl'; | ||
import { NavLink, useNavigate } from 'react-router-dom'; | ||
|
||
const VersionDetails = () => { | ||
const { formatMessage } = useIntl(); | ||
const navigate = useNavigate(); | ||
const headerId = React.useId(); | ||
|
||
return ( | ||
<Main grow={1} labelledBy={headerId}> | ||
<HeaderLayout | ||
id={headerId} | ||
title="History" | ||
navigationAction={ | ||
<Link | ||
startIcon={<ArrowLeft />} | ||
onClick={(e) => { | ||
e.preventDefault(); | ||
navigate(-1); | ||
}} | ||
as={NavLink} | ||
// @ts-expect-error - types are not inferred correctly through the as prop. | ||
to="" | ||
> | ||
{formatMessage({ | ||
id: 'global.back', | ||
defaultMessage: 'Back', | ||
})} | ||
</Link> | ||
} | ||
/> | ||
<ContentLayout> | ||
<Typography>Content</Typography> | ||
</ContentLayout> | ||
</Main> | ||
); | ||
}; | ||
|
||
export { VersionDetails }; |
20 changes: 20 additions & 0 deletions
20
packages/core/admin/admin/src/content-manager/history/components/VersionsList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import * as React from 'react'; | ||
|
||
import { Box, Typography } from '@strapi/design-system'; | ||
|
||
const VersionsList = () => { | ||
return ( | ||
<Box | ||
width="320px" | ||
minHeight="100vh" | ||
background="neutral0" | ||
borderColor="neutral200" | ||
borderWidth="0 0 0 1px" | ||
borderStyle="solid" | ||
> | ||
<Typography>Sidebar</Typography> | ||
</Box> | ||
); | ||
}; | ||
|
||
export { VersionsList }; |
46 changes: 46 additions & 0 deletions
46
packages/core/admin/admin/src/content-manager/history/pages/History.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { Flex } from '@strapi/design-system'; | ||
import { LoadingIndicatorPage } from '@strapi/helper-plugin'; | ||
import { Helmet } from 'react-helmet'; | ||
import { useIntl } from 'react-intl'; | ||
import { useParams } from 'react-router-dom'; | ||
|
||
import { useContentTypeLayout } from '../../hooks/useLayouts'; | ||
import { VersionDetails } from '../components/VersionDetails'; | ||
import { VersionsList } from '../components/VersionsList'; | ||
|
||
const HistoryPage = () => { | ||
const { formatMessage } = useIntl(); | ||
const { slug } = useParams<{ | ||
collectionType: string; | ||
singleType: string; | ||
slug: string; | ||
}>(); | ||
|
||
const { isLoading, layout } = useContentTypeLayout(slug); | ||
|
||
if (isLoading) { | ||
return <LoadingIndicatorPage />; | ||
} | ||
|
||
return ( | ||
<> | ||
<Helmet | ||
title={formatMessage( | ||
{ | ||
id: 'content-manager.history.page-title', | ||
defaultMessage: '{contentType} history', | ||
}, | ||
{ | ||
contentType: layout?.contentType.info.displayName, | ||
} | ||
)} | ||
/> | ||
<Flex direction="row" alignItems="flex-start"> | ||
<VersionDetails /> | ||
<VersionsList /> | ||
</Flex> | ||
</> | ||
); | ||
}; | ||
|
||
export { HistoryPage }; |
41 changes: 41 additions & 0 deletions
41
packages/core/admin/admin/src/content-manager/history/pages/tests/History.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { render, screen, waitFor } from '@tests/utils'; | ||
import { Route, Routes } from 'react-router-dom'; | ||
|
||
import { HistoryPage } from '../History'; | ||
|
||
describe('History page', () => { | ||
it('renders single type correctly', async () => { | ||
render( | ||
<Routes> | ||
<Route path="/content-manager/:singleType/:slug/history" element={<HistoryPage />} /> | ||
</Routes>, | ||
{ | ||
initialEntries: ['/content-manager/single-types/api::address.address/history'], | ||
} | ||
); | ||
|
||
await waitFor(() => { | ||
expect(screen.queryByTestId('loader')).not.toBeInTheDocument(); | ||
}); | ||
expect(document.title).toBe('Address history'); | ||
}); | ||
|
||
it('renders collection type correctly', async () => { | ||
render( | ||
<Routes> | ||
<Route | ||
path="/content-manager/:collectionType/:slug/:id/history" | ||
element={<HistoryPage />} | ||
/> | ||
</Routes>, | ||
{ | ||
initialEntries: ['/content-manager/collection-types/api::address.address/1/history'], | ||
} | ||
); | ||
|
||
await waitFor(() => { | ||
expect(screen.queryByTestId('loader')).not.toBeInTheDocument(); | ||
}); | ||
expect(document.title).toBe('Address history'); | ||
}); | ||
}); |
39 changes: 36 additions & 3 deletions
39
packages/core/admin/admin/src/content-manager/history/routes.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,42 @@ | ||
/* eslint-disable check-file/filename-naming-convention */ | ||
import { type RouteObject } from 'react-router-dom'; | ||
import { useLocation, type RouteObject, matchRoutes } from 'react-router-dom'; | ||
|
||
/** | ||
* These routes will be merged with the rest of the Content Manager routes | ||
*/ | ||
const routes: RouteObject[] = []; | ||
const routes: RouteObject[] = [ | ||
{ | ||
path: ':collectionType/:slug/:id/history', | ||
lazy: async () => { | ||
const { HistoryPage } = await import('./pages/History'); | ||
|
||
export { routes }; | ||
return { | ||
Component: HistoryPage, | ||
}; | ||
}, | ||
}, | ||
{ | ||
path: ':singleType/:slug/history', | ||
lazy: async () => { | ||
const { HistoryPage } = await import('./pages/History'); | ||
|
||
return { | ||
Component: HistoryPage, | ||
}; | ||
}, | ||
}, | ||
]; | ||
|
||
/** | ||
* Used to determine if we're on a history route from the admin and the content manager, | ||
* so that we can hide the left menus on all history routes | ||
*/ | ||
function useIsHistoryRoute() { | ||
const location = useLocation(); | ||
const historyRoutes = routes.map((route) => ({ path: `content-manager/${route.path}` })); | ||
const matches = matchRoutes(historyRoutes, location); | ||
|
||
return Boolean(matches); | ||
} | ||
|
||
export { routes, useIsHistoryRoute }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters