From cfb08c512140a834b70358f6fa08f42786baa5b9 Mon Sep 17 00:00:00 2001
From: Caio Almeida <117518+caiosba@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:59:32 -0300
Subject: [PATCH] Display the item title on the `<SmallMediaCard />` component
 when rendered in the "Merge Media" > "Export" dialog. (#2238)

I think that the `<SmallMediaCard />` component is consistent. It's a *media* card, not an *item* card, so the information displayed there is for the *media*.

But, under the context of the list of "Export" items under the "Merge Media" modal, it's harder to find a media when searching by the item title, since the card renders the media title, not the item title.

This PR fixes it by allowing the card to receive a custom `title` prop.

Reference: CV2-5868.
---
 src/app/components/cds/media-cards/SmallMediaCard.js | 7 +++++--
 src/app/components/media/AutoCompleteMediaItem.js    | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/components/cds/media-cards/SmallMediaCard.js b/src/app/components/cds/media-cards/SmallMediaCard.js
index 955c02a538..33729bb710 100644
--- a/src/app/components/cds/media-cards/SmallMediaCard.js
+++ b/src/app/components/cds/media-cards/SmallMediaCard.js
@@ -18,6 +18,7 @@ const SmallMediaCard = ({
   media,
   onClick,
   superAdminMask,
+  title,
 }) => {
   if (!media) {
     return (
@@ -57,7 +58,7 @@ const SmallMediaCard = ({
         <div className={styles.smallMediaCardContent}>
           <div className={styles.titleAndUrl}>
             <div className={cx('typography-subtitle2', 'small-media-card__title', styles.row, (media.url ? styles.oneLineDescription : styles.twoLinesDescription))}>
-              <ParsedText text={media.metadata?.title || media.quote || description} />
+              <ParsedText text={title || media.metadata?.title || media.quote || description} />
             </div>
             { media.url ?
               <div className={cx(styles.row, 'typography-body2')}>
@@ -86,16 +87,18 @@ SmallMediaCard.propTypes = {
     metadata: PropTypes.object,
   }).isRequired,
   superAdminMask: PropTypes.bool,
+  title: PropTypes.string,
   onClick: PropTypes.func,
 };
 
 SmallMediaCard.defaultProps = {
+  className: '',
   details: null,
   description: null,
   maskContent: false,
   superAdminMask: false,
+  title: null,
   onClick: () => {},
-  className: '',
 };
 
 // eslint-disable-next-line import/no-unused-modules
diff --git a/src/app/components/media/AutoCompleteMediaItem.js b/src/app/components/media/AutoCompleteMediaItem.js
index 98de54bc7d..f8b866dfbf 100644
--- a/src/app/components/media/AutoCompleteMediaItem.js
+++ b/src/app/components/media/AutoCompleteMediaItem.js
@@ -425,6 +425,7 @@ const AutoCompleteMediaItem = (props, context) => {
                       ]}
                       maskContent={projectMedia.show_warning_cover}
                       media={projectMedia.media}
+                      title={projectMedia.title}
                       onClick={e => handleClick(e, projectMedia.dbid)}
                     />
                   </Link>