Feature/CV2-5785: media dialog view ux updates to include media match…

… reason (#2256) - [X] Add the new component to the required sections of the MediaPage. - [X] Update GraphQL query to fetch the newly added media_cluster_origin fields. - [X] Update unit tests - [X] Update follow-up ticket for the refactoring:
meedan · Jan 23, 2025 · cd81f2c · cd81f2c
1 parent 5557bfa
commit cd81f2c
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 103 deletions.
diff --git a/localization/react-intl/src/app/components/media/MediaOrigin.json b/localization/react-intl/src/app/components/media/MediaOrigin.json
@@ -17,7 +17,7 @@
   {
     "id": "mediaOrigin.userAddedTooltip",
     "description": "Tooltip message for User Added",
-    "defaultMessage": "<strong>{user}</strong> uploaded this media using the Check interface"
+    "defaultMessage": "<strong>{user}</strong> uploaded this media using Check"
   },
   {
     "id": "mediaOrigin.userMerged",
@@ -27,7 +27,7 @@
   {
     "id": "mediaOrigin.userMergedTooltip",
     "description": "Tooltip message for User Merged",
-    "defaultMessage": "<strong>{user}</strong> added this media by merging from another cluster"
+    "defaultMessage": "<strong>{user}</strong> added this media by merging from another cluster of media"
   },
   {
     "id": "mediaOrigin.userMatched",

diff --git a/localization/react-intl/src/app/components/media/MediaOriginBanner.json b/localization/react-intl/src/app/components/media/MediaOriginBanner.json
@@ -6,22 +6,22 @@
   },
   {
     "id": "mediaOriginBanner.userAdded",
-    "description": "Message for User Matched",
-    "defaultMessage": "This media was added to the cluster by <strong>{user}</strong>"
+    "description": "Message for User Added",
+    "defaultMessage": "This media was added to the cluster of media by <strong>{user}</strong>"
   },
   {
     "id": "mediaOriginBanner.userMerged",
-    "description": "Message for User Matched",
-    "defaultMessage": "This media was added to the cluster by <strong>{user}</strong> when merged from <strong><u>{cluster}</u></strong>"
+    "description": "Message for User Merged",
+    "defaultMessage": "This media was merged into this cluster of media by <strong>{user}</strong>"
   },
   {
     "id": "mediaOriginBanner.userMatched",
     "description": "Message for User Matched",
-    "defaultMessage": "This media was added to the cluster by <strong>{user}</strong> when accepted from <strong><u>{cluster}</u></strong>"
+    "defaultMessage": "This media was added to the cluster of media by <strong>{confirmedBy}</strong> when accepted from <strong><u>{originTitle}</u></strong>"
   },
   {
     "id": "mediaOriginBanner.autoMatched",
     "description": "Message for Auto Matched",
-    "defaultMessage": "This media was automatically matched to the cluster"
+    "defaultMessage": "This media was automatically matched to the cluster of media"
   }
 ]
diff --git a/src/app/components/cds/Sandbox.js b/src/app/components/cds/Sandbox.js
@@ -27,7 +27,6 @@ import TabWrapper from './menus-lists-dialogs/TabWrapper';
 import Reorder from '../layout/Reorder';
 import AddIcon from '../../icons/settings.svg';
 import CalendarIcon from '../../icons/calendar_month.svg';
-import MediaOriginBanner from '../media/MediaOriginBanner';
 import ListIcon from '../../icons/list.svg';
 import FigmaColorLogo from '../../icons/figma_color.svg';
 import ArticleCard from '../search/SearchResultsCards/ArticleCard';
@@ -37,7 +36,6 @@ import ParsedText from '../ParsedText';
 import ClusterCard from '../search/SearchResultsCards/ClusterCard';
 import CheckFeedDataPoints from '../../CheckFeedDataPoints';
 import { FlashMessageSetterContext } from '../FlashMessage';
-import CheckMediaOrigin from '../../CheckMediaOrigin';
 import styles from './sandbox.module.css';
 
 const SandboxComponent = ({ admin }) => {
@@ -486,10 +484,6 @@ const SandboxComponent = ({ admin }) => {
             label: 'Tabs',
             value: 'tabs',
           },
-          {
-            label: 'Media Cluster Origin Buttons',
-            value: 'media-cluster-origin-buttons',
-          },
         ]}
         value={categoryTab}
         wrapContent
@@ -2389,30 +2383,6 @@ const SandboxComponent = ({ admin }) => {
           </div>
         </section>
       }
-      { (categoryTab === 'all' || categoryTab === 'media-cluster-origin-buttons') && (
-        <section>
-          <div className={styles.componentWrapper}>
-            <div className={cx('typography-subtitle2', [styles.componentName])}>
-              Media Origin Banner
-              <a
-                className={styles.figmaLink}
-                href="https://www.figma.com/design/aVRaTgms3H4jY8hOslFq5y/Media?node-id=901-1203&p=f&m=dev"
-                rel="noopener noreferrer"
-                target="_blank"
-                title="Figma Designs"
-              >
-                <FigmaColorLogo />
-              </a>
-
-              <MediaOriginBanner cluster="Foo bar" timestamp={1736876257} type={CheckMediaOrigin.TIPLINE_SUBMITTED} user="Smooch" />
-              <MediaOriginBanner cluster="Foo bar" timestamp={1736876257} type={CheckMediaOrigin.USER_ADDED} user="Bruce" />
-              <MediaOriginBanner cluster="Foo bar" timestamp={1736876257} type={CheckMediaOrigin.USER_MERGED} user="Kara" />
-              <MediaOriginBanner cluster="Bla" timestamp={1736876257} type={CheckMediaOrigin.USER_MATCHED} user="Clark" />
-              <MediaOriginBanner cluster="Foo bar" timestamp={1736876257} type={CheckMediaOrigin.AUTO_MATCHED} user="Alegre" />
-            </div>
-          </div>
-        </section>
-      )}
     </div>
   );
 };

diff --git a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js
@@ -16,6 +16,7 @@ const MediaAndRequestsDialogComponent = ({
   dialogTitle,
   feedId,
   mediaHeader,
+  mediaOriginBanner,
   mediaSlug,
   onClick,
   onClose,
@@ -54,7 +55,10 @@ const MediaAndRequestsDialogComponent = ({
         <div className={styles.columns}>
           { context === 'workspace' ?
             <>
-              <MediaCardLargeQueryRenderer projectMediaId={projectMediaId} />
+              <div>
+                {mediaOriginBanner}
+                <MediaCardLargeQueryRenderer projectMediaId={projectMediaId} />
+              </div>
               <div>
                 { projectMediaId && projectMediaImportedId && ( // Show the toggle if we have two values to switch between
                   <div className={styles.toggle}>
@@ -93,6 +97,7 @@ const MediaAndRequestsDialogComponent = ({
 MediaAndRequestsDialogComponent.defaultProps = {
   dialogTitle: '',
   mediaHeader: null,
+  mediaOriginBanner: null,
   projectMediaImportedId: null,
   feedId: null,
 };
@@ -101,6 +106,7 @@ MediaAndRequestsDialogComponent.propTypes = {
   dialogTitle: PropTypes.string,
   feedId: PropTypes.number,
   mediaHeader: PropTypes.element,
+  mediaOriginBanner: PropTypes.element,
   mediaSlug: PropTypes.element.isRequired,
   projectMediaId: PropTypes.number.isRequired,
   projectMediaImportedId: PropTypes.number,

diff --git a/src/app/components/media/MediaCardLargeFooter.js b/src/app/components/media/MediaCardLargeFooter.js
@@ -125,7 +125,7 @@ const MediaCardLargeFooter = ({
             ),
             (
               <MediaOrigin
-                type={projectMedia.media_cluster_origin}
+                origin={projectMedia.media_cluster_origin}
                 user={projectMedia.media_cluster_origin_user?.name}
               />
             ),

diff --git a/src/app/components/media/MediaComponent.js b/src/app/components/media/MediaComponent.js
@@ -8,6 +8,7 @@ import cx from 'classnames/bind';
 import MediaCardLarge from './MediaCardLarge';
 import MediaSlug from './MediaSlug';
 import MediaComponentRightPanel from './MediaComponentRightPanel';
+import MediaOriginBanner from './MediaOriginBanner';
 import MediaSimilarityBar from './Similarity/MediaSimilarityBar';
 import MediaSimilaritiesComponent from './Similarity/MediaSimilaritiesComponent';
 import MediaFeedInformation from './MediaFeedInformation';
@@ -189,6 +190,14 @@ class MediaComponent extends Component {
                     dialogTitle={projectMedia.title || projectMedia.quote || projectMedia.description}
                     feedId={projectMedia.imported_from_feed_id}
                     mediaHeader={<MediaFeedInformation projectMedia={projectMedia} />}
+                    mediaOriginBanner={
+                      <MediaOriginBanner
+                        mediaClusterRelationship={projectMedia.media_cluster_relationship}
+                        origin={projectMedia.media_cluster_origin}
+                        originTimestamp={projectMedia.media_cluster_origin_timestamp}
+                        user={projectMedia.media_cluster_origin_user.name}
+                      />
+                    }
                     mediaSlug={
                       <MediaSlug
                         className={styles['media-slug-title']}
@@ -342,6 +351,19 @@ export default createFragmentContainer(withPusher(MediaComponent), graphql`
         slug
       }
     }
+    media_cluster_origin
+    media_cluster_origin_user {
+      name
+    }
+    media_cluster_origin_timestamp
+    media_cluster_relationship {
+      target {
+        title
+      }
+      confirmed_by {
+        name
+      }
+    }
     is_confirmed_similar_to_another_item
     is_suggested
     is_secondary

diff --git a/src/app/components/media/MediaOrigin.js b/src/app/components/media/MediaOrigin.js
@@ -10,8 +10,8 @@ import Tipline from '../../icons/question_answer.svg';
 import Tooltip from '../cds/alerts-and-prompts/Tooltip';
 import CheckMediaOrigin from '../../CheckMediaOrigin';
 
-const getIconAndMessage = (type, user) => {
-  switch (type) {
+const getIconAndMessage = (origin, user) => {
+  switch (origin) {
   case CheckMediaOrigin.TIPLINE_SUBMITTED:
     return {
       icon: <Tipline />,
@@ -42,7 +42,7 @@ const getIconAndMessage = (type, user) => {
       ),
       tooltipMessage: (
         <FormattedHTMLMessage
-          defaultMessage="<strong>{user}</strong> uploaded this media using the Check interface"
+          defaultMessage="<strong>{user}</strong> uploaded this media using Check"
           description="Tooltip message for User Added"
           id="mediaOrigin.userAddedTooltip"
           values={{ user }}
@@ -61,7 +61,7 @@ const getIconAndMessage = (type, user) => {
       ),
       tooltipMessage: (
         <FormattedHTMLMessage
-          defaultMessage="<strong>{user}</strong> added this media by merging from another cluster"
+          defaultMessage="<strong>{user}</strong> added this media by merging from another cluster of media"
           description="Tooltip message for User Merged"
           id="mediaOrigin.userMergedTooltip"
           values={{ user }}
@@ -114,8 +114,8 @@ const getIconAndMessage = (type, user) => {
   }
 };
 
-const MediaOrigin = ({ type, user }) => {
-  const { icon, message, tooltipMessage } = getIconAndMessage(type, user);
+const MediaOrigin = ({ origin, user }) => {
+  const { icon, message, tooltipMessage } = getIconAndMessage(origin, user);
 
   return (
     <Tooltip
@@ -135,13 +135,9 @@ const MediaOrigin = ({ type, user }) => {
   );
 };
 
-MediaOrigin.defaultProps = {
-  user: 'Unknown User',
-};
-
 MediaOrigin.propTypes = {
-  type: PropTypes.number.isRequired,
-  user: PropTypes.string,
+  origin: PropTypes.number.isRequired,
+  user: PropTypes.string.isRequired,
 };
 
 export default MediaOrigin;
diff --git a/src/app/components/media/MediaOrigin.test.js b/src/app/components/media/MediaOrigin.test.js
@@ -10,29 +10,29 @@ import CheckMediaOrigin from '../../CheckMediaOrigin';
 
 describe('<MediaOrigin />', () => {
   it('should render a button with the correct icon and message for each type', () => {
-    const tiplineSubmitted = mountWithIntl(<MediaOrigin type={CheckMediaOrigin.TIPLINE_SUBMITTED} />);
+    const tiplineSubmitted = mountWithIntl(<MediaOrigin origin={CheckMediaOrigin.TIPLINE_SUBMITTED} user="Smooch" />);
     expect(tiplineSubmitted.find(Tipline).length).toEqual(1);
     expect(tiplineSubmitted.html()).toMatch('Tipline Submitted');
 
-    const userAdded = mountWithIntl(<MediaOrigin type={CheckMediaOrigin.USER_ADDED} user="John Doe" />);
+    const userAdded = mountWithIntl(<MediaOrigin origin={CheckMediaOrigin.USER_ADDED} user="John Doe" />);
     expect(userAdded.find(PersonAdd).length).toEqual(1);
     expect(userAdded.html()).toMatch('User Added');
 
-    const userMerged = mountWithIntl(<MediaOrigin type={CheckMediaOrigin.USER_MERGED} user="John Doe" />);
+    const userMerged = mountWithIntl(<MediaOrigin origin={CheckMediaOrigin.USER_MERGED} user="John Doe" />);
     expect(userMerged.find(Person).length).toEqual(1);
     expect(userMerged.html()).toMatch('User Merged');
 
-    const userMatched = mountWithIntl(<MediaOrigin type={CheckMediaOrigin.USER_MATCHED} user="John Doe" />);
+    const userMatched = mountWithIntl(<MediaOrigin origin={CheckMediaOrigin.USER_MATCHED} user="John Doe" />);
     expect(userMatched.find(PersonCheck).length).toEqual(1);
     expect(userMatched.html()).toMatch('User Matched');
 
-    const autoMatched = mountWithIntl(<MediaOrigin type={CheckMediaOrigin.AUTO_MATCHED} />);
+    const autoMatched = mountWithIntl(<MediaOrigin origin={CheckMediaOrigin.AUTO_MATCHED} user="Alegre" />);
     expect(autoMatched.find(Bolt).length).toEqual(1);
     expect(autoMatched.html()).toMatch('Auto Matched');
   });
 
   it('should return null for invalid type', () => {
-    const wrapper = mountWithIntl(<MediaOrigin type={99} />);
+    const wrapper = mountWithIntl(<MediaOrigin origin={99} user="user" />);
     expect(wrapper.find('FormattedMessage').length).toEqual(0);
   });
 });