fix: history fields width (#21313)

* fix: history field width

* fix: relations to admin:user are not fetched correctly

* fix: do not link to admin users from history relation input

* fix: apply shadow none everywhere

---------

Co-authored-by: Alexandre Bodin <bodin.alex@gmail.com>

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

@@ -109,7 +109,7 @@ const FormPanel = ({ panel }: { panel: EditFieldLayout[][] }) => {
 
     return (
       <Grid.Root key={field.name} gap={4}>
-        <Grid.Item col={12} s={12} xs={12}>
+        <Grid.Item col={12} s={12} xs={12} direction="column" alignItems="stretch">
           <VersionInputRenderer {...field} />
         </Grid.Item>
       </Grid.Root>
@@ -132,7 +132,14 @@ const FormPanel = ({ panel }: { panel: EditFieldLayout[][] }) => {
           <Grid.Root key={gridRowIndex} gap={4}>
             {row.map(({ size, ...field }) => {
               return (
-                <Grid.Item col={size} key={field.name} s={12} xs={12}>
+                <Grid.Item
+                  col={size}
+                  key={field.name}
+                  s={12}
+                  xs={12}
+                  direction="column"
+                  alignItems="stretch"
+                >
                   <VersionInputRenderer {...field} />
                 </Grid.Item>
               );

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

@@ -7,7 +7,7 @@ import {
   useField,
   Form,
 } from '@strapi/admin/strapi-admin';
-import { Alert, Box, Field, Flex, Link, Tooltip } from '@strapi/design-system';
+import { Alert, Box, Field, Flex, Link, Tooltip, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import { styled } from 'styled-components';
@@ -40,7 +40,7 @@ import type { RelationResult } from '../../services/relations';
 import type { Schema } from '@strapi/types';
 import type { DistributiveOmit } from 'react-redux';
 
-const StyledAlert = styled(Alert).attrs({ closeLabel: 'Close', onClose: () => {} })`
+const StyledAlert = styled(Alert).attrs({ closeLabel: 'Close', onClose: () => {}, shadow: 'none' })`
   button {
     display: none;
   }
@@ -107,12 +107,14 @@ const CustomRelationInput = (props: RelationsFieldProps) => {
         <Flex direction="column" gap={2} marginTop={1} alignItems="stretch">
           {results.map((relationData) => {
             // @ts-expect-error - targetModel does exist on the attribute. But it's not typed.
-            const href = `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relationData.documentId}`;
+            const { targetModel } = props.attribute;
+            const href = `../${COLLECTION_TYPES}/${targetModel}/${relationData.documentId}`;
             const label = getRelationLabel(relationData, props.mainField);
+            const isAdminUserRelation = targetModel === 'admin::user';
 
             return (
               <Flex
-                key={relationData.documentId}
+                key={relationData.documentId ?? relationData.id}
                 paddingTop={2}
                 paddingBottom={2}
                 paddingLeft={4}
@@ -123,10 +125,14 @@ const CustomRelationInput = (props: RelationsFieldProps) => {
                 justifyContent="space-between"
               >
                 <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
-                  <Tooltip description={label}>
-                    <LinkEllipsis tag={NavLink} to={href}>
-                      {label}
-                    </LinkEllipsis>
+                  <Tooltip label={label}>
+                    {isAdminUserRelation ? (
+                      <Typography>{label}</Typography>
+                    ) : (
+                      <LinkEllipsis tag={NavLink} to={href}>
+                        {label}
+                      </LinkEllipsis>
+                    )}
                   </Tooltip>
                 </Box>
                 <DocumentStatus status={relationData.status as string} />

packages/core/content-manager/server/src/history/services/history.ts

@@ -64,6 +64,7 @@ const createHistoryService = ({ strapi }: { strapi: Core.Strapi }) => {
         const entryWithRelations = await Object.entries(entry.schema).reduce(
           async (currentDataWithRelations, [attributeKey, attributeSchema]) => {
             const attributeValue = entry.data[attributeKey];
+
             const attributeValues = Array.isArray(attributeValue)
               ? attributeValue
               : [attributeValue];
@@ -105,9 +106,14 @@ const createHistoryService = ({ strapi }: { strapi: Core.Strapi }) => {
                       return null;
                     }
 
-                    return strapi
-                      .query('admin::user')
-                      .findOne({ where: { id: userToPopulate.id } });
+                    return strapi.query('admin::user').findOne({
+                      where: {
+                        ...(userToPopulate.id ? { id: userToPopulate.id } : {}),
+                        ...(userToPopulate.documentId
+                          ? { documentId: userToPopulate.documentId }
+                          : {}),
+                      },
+                    });
                   })
                 );