Display the item title on the <SmallMediaCard /> component when ren…

…dered 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

@@ -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

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>