From 5d0c1f94a13401b93681dfdb1fbde2e3045ee95b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?=
 <8087692+remidej@users.noreply.github.com>
Date: Wed, 18 Sep 2024 05:49:14 -0400
Subject: [PATCH] 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>
---
 .../src/history/components/VersionContent.tsx | 11 ++++++++--
 .../components/VersionInputRenderer.tsx       | 22 ++++++++++++-------
 .../server/src/history/services/history.ts    | 12 +++++++---
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/core/content-manager/admin/src/history/components/VersionContent.tsx b/packages/core/content-manager/admin/src/history/components/VersionContent.tsx
index cb26b9afbb..9b64338fb6 100644
--- a/packages/core/content-manager/admin/src/history/components/VersionContent.tsx
+++ b/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>
               );
diff --git a/packages/core/content-manager/admin/src/history/components/VersionInputRenderer.tsx b/packages/core/content-manager/admin/src/history/components/VersionInputRenderer.tsx
index 236dbdec38..8d404879bb 100644
--- a/packages/core/content-manager/admin/src/history/components/VersionInputRenderer.tsx
+++ b/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} />
diff --git a/packages/core/content-manager/server/src/history/services/history.ts b/packages/core/content-manager/server/src/history/services/history.ts
index f979578be7..0282a6c449 100644
--- a/packages/core/content-manager/server/src/history/services/history.ts
+++ b/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 }
+                          : {}),
+                      },
+                    });
                   })
                 );