feat: list history versions in the history page sidebar

packages/core/admin/admin/src/content-manager/history/components/VersionDetails.tsx

@@ -3,40 +3,79 @@ 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 { Contracts } from '@strapi/plugin-content-manager/_internal/shared';
 import { useIntl } from 'react-intl';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
-const VersionDetails = () => {
+/* -------------------------------------------------------------------------------------------------
+ * VersionHeader
+ * -----------------------------------------------------------------------------------------------*/
+
+interface VersionHeaderProps {
+  headerId: string;
+  version: Contracts.HistoryVersions.HistoryVersionDataResponse;
+}
+
+const VersionHeader = ({ headerId, version }: VersionHeaderProps) => {
   const { formatMessage } = useIntl();
-  const navigate = useNavigate();
+
+  return (
+    <HeaderLayout
+      id={headerId}
+      title={`History version ${version.id}`}
+      navigationAction={
+        <Link
+          startIcon={<ArrowLeft />}
+          as={NavLink}
+          // @ts-expect-error - types are not inferred correctly through the as prop.
+          to=".."
+        >
+          {formatMessage({
+            id: 'global.back',
+            defaultMessage: 'Back',
+          })}
+        </Link>
+      }
+    />
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * VersionContent
+ * -----------------------------------------------------------------------------------------------*/
+
+interface VersionContentProps {
+  version: Contracts.HistoryVersions.HistoryVersionDataResponse;
+}
+
+const VersionContent = ({ version }: VersionContentProps) => {
+  return (
+    <ContentLayout>
+      <Typography>TODO: display content for version {version.id}</Typography>
+    </ContentLayout>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * VersionDetails
+ * -----------------------------------------------------------------------------------------------*/
+
+interface VersionDetailsProps {
+  version: Contracts.HistoryVersions.HistoryVersionDataResponse | undefined;
+}
+
+const VersionDetails = ({ version }: VersionDetailsProps) => {
   const headerId = React.useId();
 
+  if (!version) {
+    // TODO: handle selected version not found when the designs are ready
+    return <Main grow={1} />;
+  }
+
   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>
+      <VersionHeader version={version} headerId={headerId} />
+      <VersionContent version={version} />
     </Main>
   );
 };

packages/core/admin/admin/src/content-manager/history/components/VersionsList.tsx

@@ -1,19 +1,211 @@
 import * as React from 'react';
 
-import { Box, Typography } from '@strapi/design-system';
+import { Box, Flex, Typography, type BoxProps } from '@strapi/design-system';
+import { RelativeTime, useQueryParams } from '@strapi/helper-plugin';
+import { Contracts } from '@strapi/plugin-content-manager/_internal/shared';
+import { stringify } from 'qs';
+import { type MessageDescriptor, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { getDisplayName } from '../../utils/users';
+
+/* -------------------------------------------------------------------------------------------------
+ * BlueText
+ * -----------------------------------------------------------------------------------------------*/
+
+const BlueText = (children: React.ReactNode) => (
+  <Typography textColor="primary600">{children}</Typography>
+);
+
+/* -------------------------------------------------------------------------------------------------
+ * VersionCard
+ * -----------------------------------------------------------------------------------------------*/
+
+interface StatusData {
+  background: BoxProps['background'];
+  border: BoxProps['borderColor'];
+  text: BoxProps['color'];
+  message: MessageDescriptor;
+}
+
+interface VersionCardProps {
+  version: Contracts.HistoryVersions.GetHistoryVersions.Response['data'][number];
+  isCurrent: boolean;
+}
+
+const VersionCard = ({ version, isCurrent }: VersionCardProps) => {
+  const { formatDate, formatMessage } = useIntl();
+  const [{ query }] = useQueryParams<{ id?: string }>();
+
+  const statusData = ((): StatusData => {
+    switch (version.status) {
+      case 'draft':
+        return {
+          background: 'secondary100',
+          border: 'secondary200',
+          text: 'secondary700',
+          message: {
+            id: 'content-manager.containers.List.draft',
+            defaultMessage: 'Draft',
+          },
+        };
+      case 'modified':
+        return {
+          background: 'alternative100',
+          border: 'alternative200',
+          text: 'alternative700',
+          message: {
+            // TODO: check the translation key once D&P v5 is done
+            id: 'content-manager.containers.List.modified',
+            defaultMessage: 'Modified',
+          },
+        };
+      case 'published':
+      default:
+        return {
+          background: 'success100',
+          border: 'success200',
+          text: 'success700',
+          message: {
+            id: 'content-manager.containers.List.published',
+            defaultMessage: 'Published',
+          },
+        };
+    }
+  })();
+  const isActive = query.id === version.id.toString();
+  const author = version.createdBy && getDisplayName(version.createdBy, formatMessage);
+
+  return (
+    <Flex
+      direction="column"
+      alignItems="flex-start"
+      gap={3}
+      hasRadius
+      borderWidth="1px"
+      borderStyle="solid"
+      borderColor={isActive ? 'primary600' : 'neutral200'}
+      paddingTop={5}
+      paddingBottom={5}
+      paddingLeft={5}
+      paddingRight={5}
+      as={Link}
+      to={`?${stringify({ ...query, id: version.id })}`}
+      style={{ textDecoration: 'none' }}
+    >
+      <Flex direction="column" gap={1} alignItems="flex-start">
+        <Typography as="h3" fontWeight="semiBold">
+          {formatDate(version.createdAt, {
+            day: 'numeric',
+            month: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+          })}
+        </Typography>
+        <Typography as="p" textColor="neutral600">
+          {formatMessage(
+            {
+              id: 'content-manager.history.sidebar.versionDescription',
+              defaultMessage:
+                '{distanceToNow}{isAnonymous, select, true {} other { by {author}}}{isCurrent, select, true { <b>(current)</b>} other {}}',
+            },
+            {
+              distanceToNow: <RelativeTime timestamp={new Date(version.createdAt)} />,
+              author,
+              isAnonymous: !Boolean(version.createdBy),
+              isCurrent,
+              b: BlueText,
+            }
+          )}
+        </Typography>
+      </Flex>
+      {version.status && (
+        <Box
+          background={statusData.background}
+          borderStyle="solid"
+          borderWidth="1px"
+          borderColor={statusData.border}
+          hasRadius
+          paddingLeft="6px"
+          paddingRight="6px"
+          paddingTop="2px"
+          paddingBottom="2px"
+        >
+          <Typography variant="pi" fontWeight="bold" textColor={statusData.text}>
+            {formatMessage(statusData.message)}
+          </Typography>
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * VersionsList
+ * -----------------------------------------------------------------------------------------------*/
+
+interface VersionsListProps {
+  versions: Contracts.HistoryVersions.GetHistoryVersions.Response;
+  page: number;
+}
+
+const VersionsList = ({ versions, page }: VersionsListProps) => {
+  const { formatMessage } = useIntl();
 
-const VersionsList = () => {
   return (
-    <Box
+    <Flex
+      shrink={0}
+      direction="column"
+      alignItems="stretch"
       width="320px"
-      minHeight="100vh"
+      height="100vh"
       background="neutral0"
       borderColor="neutral200"
       borderWidth="0 0 0 1px"
       borderStyle="solid"
+      as="aside"
     >
-      <Typography>Sidebar</Typography>
-    </Box>
+      <Flex
+        direction="row"
+        justifyContent="space-between"
+        padding={4}
+        borderColor="neutral200"
+        borderWidth="0 0 1px"
+        borderStyle="solid"
+        as="header"
+      >
+        <Typography as="h2" variant="omega" fontWeight="semiBold">
+          {formatMessage({
+            id: 'content-manager.history.sidebar.title',
+            defaultMessage: 'Versions',
+          })}
+        </Typography>
+        <Box background="neutral150" hasRadius padding={1}>
+          <Typography variant="sigma" textColor="neutral600">
+            {versions.meta.pagination?.total}
+          </Typography>
+        </Box>
+      </Flex>
+      <Flex
+        direction="column"
+        gap={4}
+        paddingTop={4}
+        paddingLeft={4}
+        paddingRight={4}
+        paddingBottom={4}
+        as="ul"
+        alignItems="stretch"
+        flex={1}
+        overflow="scroll"
+      >
+        {versions.data.map((version, index) => (
+          <li key={version.id}>
+            <VersionCard version={version} isCurrent={page === 1 && index === 0} />
+          </li>
+        ))}
+      </Flex>
+    </Flex>
   );
 };
 

packages/core/admin/admin/src/content-manager/history/components/tests/VersionsList.test.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+import { within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render as renderRTL, screen, waitFor } from '@tests/utils';
+import { useLocation } from 'react-router-dom';
+
+import { mockHistoryVersionsData } from '../../tests/mockData';
+import { VersionsList } from '../VersionsList';
+
+const user = userEvent.setup();
+
+const LocationDisplay = () => {
+  const location = useLocation();
+
+  return <span data-testid="location">{location.search}</span>;
+};
+
+const render = (props: React.ComponentProps<typeof VersionsList>) =>
+  renderRTL(<VersionsList {...props} />, {
+    renderOptions: {
+      wrapper({ children }) {
+        return (
+          <>
+            {children}
+            <LocationDisplay />
+          </>
+        );
+      },
+    },
+  });
+
+describe('VersionsList', () => {
+  it('renders a list of history versions', async () => {
+    render({ page: 1, versions: mockHistoryVersionsData.historyVersions });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('loader')).not.toBeInTheDocument();
+    });
+
+    // Shows sidebar header and total count
+    const header = screen.getByRole('banner');
+    expect(within(header).getByText('Versions')).toBeInTheDocument();
+    expect(screen.getByText('14')).toBeInTheDocument();
+    expect(screen.getByText('Versions')).toBeInTheDocument();
+
+    // Displays the right info for each version
+    const versions = screen.getAllByRole('link');
+    expect(within(versions[0]).getByText(/current/i)).toBeInTheDocument();
+    expect(within(versions[1]).queryByText(/current/i)).not.toBeInTheDocument();
+    expect(within(versions[1]).getByText(/draft/i)).toBeInTheDocument();
+    expect(within(versions[1]).getByText(/by/i)).toBeInTheDocument();
+    expect(within(versions[1]).getByText('1/31/2024, 03:58 PM')).toBeInTheDocument();
+    expect(within(versions[1]).getByText(/by Kai Doe/i)).toBeInTheDocument();
+
+    // Redirects to 2nd version on click
+    await user.click(versions[1]);
+    expect(screen.queryByText('?id=26')).not.toBeInTheDocument();
+    expect(screen.getByText('?id=25')).toBeInTheDocument();
+
+    // Redirects to 1st version again on click
+    await user.click(versions[0]);
+    expect(screen.queryByText('?id=25')).not.toBeInTheDocument();
+    expect(screen.getByText('?id=26')).toBeInTheDocument();
+  });
+});