enhancement: add relation data to history versions response

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

@@ -1,25 +1,100 @@
-import { Form } from '@strapi/admin/strapi-admin';
-import { Box, ContentLayout, Flex, Grid, GridItem, Typography } from '@strapi/design-system';
+import * as React from 'react';
+
+import { Form, useField, useStrapiApp } from '@strapi/admin/strapi-admin';
+import {
+  Box,
+  ContentLayout,
+  FieldLabel,
+  Flex,
+  Grid,
+  GridItem,
+  Typography,
+} from '@strapi/design-system';
 
 import {
   InputRenderer,
   type InputRendererProps,
 } from '../../pages/EditView/components/InputRenderer';
 import { useHistoryContext } from '../pages/History';
 
+import type { RelationsFieldProps } from '../../pages/EditView/components/FormInputs/Relations';
+
 /* -------------------------------------------------------------------------------------------------
- * CustomInputRenderer
+ * CustomRelationInput
+ * -----------------------------------------------------------------------------------------------*/
+
+const CustomRelationInput = (props: RelationsFieldProps) => {
+  const field = useField(props.name);
+
+  return (
+    <Box>
+      <FieldLabel>{props.label}</FieldLabel>
+      {field.value.results.length === 0 ? (
+        <Typography>No content</Typography>
+      ) : (
+        <Flex direction="column" gap={2} alignItems="stretch">
+          {(field.value.results as Record<string, unknown>[]).map((relationData, index) => {
+            return (
+              <Flex
+                key={index}
+                paddingTop={2}
+                paddingBottom={2}
+                paddingLeft={4}
+                paddingRight={4}
+                hasRadius
+                borderColor="neutral200"
+                background="neutral150"
+                justifyContent="space-between"
+              >
+                <pre>
+                  <Typography as="code">{JSON.stringify(relationData, null, 2)}</Typography>
+                </pre>
+              </Flex>
+            );
+          })}
+          <Typography>{field.value.meta.missingCount} missing relations</Typography>
+        </Flex>
+      )}
+    </Box>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * CustomMediaInput
  * -----------------------------------------------------------------------------------------------*/
 
-// The renderers for these types will be added in future PRs, they need special handling
-const UNSUPPORTED_TYPES = ['media', 'relation'];
+const CustomMediaInput = (props: InputRendererProps) => {
+  const field = useField(props.name);
+  const fields = useStrapiApp('CustomMediaInput', (state) => state.fields);
+  const MediaLibrary = fields.media as React.ComponentType<
+    InputRendererProps & { multiple: boolean }
+  >;
+
+  return (
+    <Box>
+      <Flex direction="column" gap={2} alignItems="stretch">
+        <Form method="PUT" disabled={true} initialValues={{ [props.name]: field.value.results }}>
+          <MediaLibrary {...props} disabled={true} multiple={field.value.results.length > 1} />
+        </Form>
+        <Typography>{field.value.meta.missingCount} missing relations</Typography>
+      </Flex>
+    </Box>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * CustomInputRenderer
+ * -----------------------------------------------------------------------------------------------*/
 
 const CustomInputRenderer = (props: InputRendererProps) => {
-  if (UNSUPPORTED_TYPES.includes(props.type)) {
-    return <Typography>TODO: support {props.type}</Typography>;
+  switch (props.type) {
+    case 'media':
+      return <CustomMediaInput {...props} />;
+    case 'relation':
+      return <CustomRelationInput {...props} />;
+    default:
+      return <InputRenderer {...props} />;
   }
-
-  return <InputRenderer {...props} />;
 };
 
 /* -------------------------------------------------------------------------------------------------

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

@@ -52,6 +52,7 @@ describe('VersionHeader', () => {
       createdAt: '2022-01-01T00:00:00Z',
       status: 'draft' as const,
       schema: {},
+      componentsSchemas: {},
       locale: null,
       data: {
         title: 'Test Title',
@@ -132,6 +133,7 @@ describe('VersionHeader', () => {
       createdAt: '2022-01-01T00:00:00Z',
       status: 'draft' as const,
       schema: {},
+      componentsSchemas: {},
       locale: null,
       data: {
         title: 'Test Title',