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

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';
@@ -214,6 +215,14 @@ class MediaComponent extends Component {
                         )]}
                       />
                     }
+                    media_origin_banner={
+                      <MediaOriginBanner
+                        media_cluster_origin={projectMedia.media_cluster_origin}
+                        media_cluster_origin_timestamp={projectMedia.media_cluster_origin_timestamp}
+                        media_cluster_origin_user={projectMedia.media_cluster_origin_user.name}
+                        media_cluster_relationship={projectMedia.media_cluster_relationship}
+                      />
+                    }
                     projectMediaId={projectMedia.dbid}
                     projectMediaImportedId={projectMedia.imported_from_project_media_id}
                     onClick={e => e.stopPropagation()}
@@ -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

src/app/components/media/MediaOriginBanner.js

@@ -115,6 +115,10 @@ const MediaOriginBanner = ({
   );
 };
 
+MediaOriginBanner.defaultProps = {
+  media_cluster_relationship: {},
+};
+
 MediaOriginBanner.propTypes = {
   media_cluster_origin: PropTypes.number.isRequired,
   media_cluster_origin_timestamp: PropTypes.number.isRequired,
@@ -126,7 +130,7 @@ MediaOriginBanner.propTypes = {
     target: PropTypes.shape({
       title: PropTypes.string,
     }),
-  }).isRequired,
+  }),
 };
 
 export default MediaOriginBanner;