From 4afa1b847ada8eb7f699d934887873e28eace022 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Mon, 20 Jan 2025 09:16:05 -0300 Subject: [PATCH 01/12] adding MediaOriginBanner component to media page --- .../MediaAndRequestsDialogComponent.js | 14 +++++++++++++- src/app/components/media/MediaOrigin.js | 5 +---- src/app/components/media/MediaOriginBanner.js | 4 ++-- .../media/Similarity/MediaRelationship.js | 11 ++++++++++- .../Similarity/MediaSimilaritiesComponent.js | 16 +++++++++++++++- 5 files changed, 41 insertions(+), 9 deletions(-) diff --git a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js index 08a63cfb5b..6a54fc8130 100644 --- a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js +++ b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js @@ -10,11 +10,15 @@ import MediaRequests from '../../media/MediaRequests'; import { MediaCardLargeQueryRenderer } from '../../media/MediaCardLarge'; import FeedItemMediaDialog from '../../feed/FeedItemMediaDialog'; import dialogStyles from '../../../styles/css/dialog.module.css'; +import MediaOriginBanner from '../../media/MediaOriginBanner'; import styles from './MediaAndRequestsDialog.module.css'; const MediaAndRequestsDialogComponent = ({ dialogTitle, feedId, + media_cluster_origin, + media_cluster_origin_timestamp, + media_cluster_origin_user, mediaHeader, mediaSlug, onClick, @@ -24,6 +28,11 @@ const MediaAndRequestsDialogComponent = ({ }) => { const [context, setContext] = React.useState(projectMediaId ? 'workspace' : 'feed'); + // eslint-disable-next-line + console.log("blalflslfalfsa") + // eslint-disable-next-line + console.log("Dialog: ", media_cluster_origin, media_cluster_origin_user) + return ( { context === 'workspace' ? <> - +
+ + +
{ projectMediaId && projectMediaImportedId && ( // Show the toggle if we have two values to switch between
diff --git a/src/app/components/media/MediaOrigin.js b/src/app/components/media/MediaOrigin.js index 076a8b2178..54a6a6b4ce 100644 --- a/src/app/components/media/MediaOrigin.js +++ b/src/app/components/media/MediaOrigin.js @@ -135,13 +135,10 @@ const MediaOrigin = ({ type, user }) => { ); }; -MediaOrigin.defaultProps = { - user: 'Unknown User', -}; MediaOrigin.propTypes = { type: PropTypes.number.isRequired, - user: PropTypes.string, + user: PropTypes.string.isRequired, }; export default MediaOrigin; diff --git a/src/app/components/media/MediaOriginBanner.js b/src/app/components/media/MediaOriginBanner.js index f5e46b9fa4..2b53ba8194 100644 --- a/src/app/components/media/MediaOriginBanner.js +++ b/src/app/components/media/MediaOriginBanner.js @@ -51,7 +51,7 @@ const getIconAndMessage = (type, user, cluster, timestamp) => { message: ( <> { message: ( <> { const [isSelected, setIsSelected] = React.useState(false); + // eslint-disable-next-line + console.log('MediaCluster', media_cluster_origin, media_cluster_origin_user); + // eslint-disable-next-line + console.log('MediaRelantioship', media_cluster_relationship); const swallowClick = (ev) => { // Don't close Dialog when clicking on it ev.stopPropagation(); @@ -306,7 +312,7 @@ const MediaRelationship = ({ ), ( )]; @@ -325,6 +331,9 @@ const MediaRelationship = ({ details={details} /> } + media_cluster_origin={media_cluster_origin} + media_cluster_origin_timestamp={media_cluster_origin_timestamp} + media_cluster_origin_user={media_cluster_origin_user} projectMediaId={relationship.target_id} projectMediaImportedId={relationship?.target?.imported_from_project_media_id} onClick={swallowClick} diff --git a/src/app/components/media/Similarity/MediaSimilaritiesComponent.js b/src/app/components/media/Similarity/MediaSimilaritiesComponent.js index b0f3018970..4495fdf06d 100644 --- a/src/app/components/media/Similarity/MediaSimilaritiesComponent.js +++ b/src/app/components/media/Similarity/MediaSimilaritiesComponent.js @@ -28,7 +28,9 @@ const MediaSimilaritiesComponent = ({ projectMedia }) => ( mainProjectMediaDemand={projectMedia.demand} mainProjectMediaId={projectMedia.id} media_cluster_origin={relationship.node.target?.media_cluster_origin} + media_cluster_origin_timestamp={relationship.node.target?.media_cluster_origin_timestamp} media_cluster_origin_user={relationship.node.target?.media_cluster_origin_user.name} + media_cluster_relationship={relationship.node.target?.media_cluster_relationship} relationship={relationship.node} relationshipSourceId={relationship.node.source_id} relationshipTargetId={relationship.node.target_id} @@ -75,9 +77,21 @@ export default createFragmentContainer(MediaSimilaritiesComponent, graphql` target { id media_cluster_origin - media_cluster_origin_user{ + media_cluster_origin_user { name } + media_cluster_origin_timestamp + media_cluster_relationship { + dbid + user_id + confirmed_at + weight + source_field + target_field + model + user { name } + confirmed_by { name } + } dbid title description From 1823f142d26444bbc25fcb7f7413386161856bb8 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Mon, 20 Jan 2025 19:58:07 -0300 Subject: [PATCH 02/12] passing media_clust_relantioship props --- .../components/media/MediaOriginBanner.json | 14 ++++---- .../MediaAndRequestsDialogComponent.js | 7 ++-- src/app/components/media/MediaOriginBanner.js | 33 +++++++++++-------- .../media/Similarity/MediaRelationship.js | 1 + .../Similarity/MediaSimilaritiesComponent.js | 15 +++------ 5 files changed, 35 insertions(+), 35 deletions(-) diff --git a/localization/react-intl/src/app/components/media/MediaOriginBanner.json b/localization/react-intl/src/app/components/media/MediaOriginBanner.json index 8e85f209aa..f017423816 100644 --- a/localization/react-intl/src/app/components/media/MediaOriginBanner.json +++ b/localization/react-intl/src/app/components/media/MediaOriginBanner.json @@ -2,26 +2,26 @@ { "id": "mediaOriginBanner.tiplineSubmitted", "description": "Message for Tipline Submitted", - "defaultMessage": "This media was submitted via Tipline" + "defaultMessage": "This media was submitted via Tipline," }, { "id": "mediaOriginBanner.userAdded", - "description": "Message for User Matched", - "defaultMessage": "This media was added to the cluster by {user}" + "description": "Message for User Added", + "defaultMessage": "This media was added to the cluster by {user}," }, { "id": "mediaOriginBanner.userMerged", - "description": "Message for User Matched", - "defaultMessage": "This media was added to the cluster by {user} when merged from {cluster}" + "description": "Message for User Merged", + "defaultMessage": "This media was merged to the cluster by {user}," }, { "id": "mediaOriginBanner.userMatched", "description": "Message for User Matched", - "defaultMessage": "This media was added to the cluster by {user} when accepted from {cluster}" + "defaultMessage": "This media was added to the cluster by {user} when accepted from {cluster}," }, { "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," } ] \ No newline at end of file diff --git a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js index 6a54fc8130..1c2ad75c39 100644 --- a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js +++ b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js @@ -19,6 +19,7 @@ const MediaAndRequestsDialogComponent = ({ media_cluster_origin, media_cluster_origin_timestamp, media_cluster_origin_user, + media_cluster_relationship, mediaHeader, mediaSlug, onClick, @@ -29,9 +30,7 @@ const MediaAndRequestsDialogComponent = ({ const [context, setContext] = React.useState(projectMediaId ? 'workspace' : 'feed'); // eslint-disable-next-line - console.log("blalflslfalfsa") - // eslint-disable-next-line - console.log("Dialog: ", media_cluster_origin, media_cluster_origin_user) + console.log("Dialog: ", media_cluster_origin, media_cluster_origin_user, media_cluster_origin_timestamp, media_cluster_relationship); return (
- +
diff --git a/src/app/components/media/MediaOriginBanner.js b/src/app/components/media/MediaOriginBanner.js index 2b53ba8194..6a2d62e098 100644 --- a/src/app/components/media/MediaOriginBanner.js +++ b/src/app/components/media/MediaOriginBanner.js @@ -11,17 +11,19 @@ import CheckMediaOrigin from '../../CheckMediaOrigin'; import { parseStringUnixTimestamp } from '../../helpers'; import TimeBefore from '../TimeBefore'; -const getIconAndMessage = (type, user, cluster, timestamp) => { +const getIconAndMessage = (media_cluster_origin, media_cluster_relationship, user, cluster, timestamp) => { // The default messages are temporary, and will be updated in the ticket CV2-5785 const formattedTimestamp = ; - switch (type) { + // eslint-disable-next-line + console.log('formattedTimestamp: ',formattedTimestamp) + switch (media_cluster_origin) { case CheckMediaOrigin.TIPLINE_SUBMITTED: return { icon: , message: ( <> { message: ( <> @@ -51,10 +53,10 @@ const getIconAndMessage = (type, user, cluster, timestamp) => { message: ( <> {formattedTimestamp} @@ -69,7 +71,7 @@ const getIconAndMessage = (type, user, cluster, timestamp) => { defaultMessage="This media was added to the cluster by {user} when accepted from {cluster}, " description="Message for User Matched" id="mediaOriginBanner.userMatched" - values={{ user, cluster }} + values={{ user, media_cluster_relationship }} /> {formattedTimestamp} @@ -81,7 +83,7 @@ const getIconAndMessage = (type, user, cluster, timestamp) => { message: ( <> @@ -99,9 +101,12 @@ const getIconAndMessage = (type, user, cluster, timestamp) => { }; const MediaOriginBanner = ({ - cluster, timestamp, type, user, + media_cluster_origin, media_cluster_relationship, timestamp, user, }) => { - const { icon, message } = getIconAndMessage(type, user, cluster, timestamp); + const { icon, message } = getIconAndMessage(media_cluster_origin, user, media_cluster_relationship, timestamp); + + // eslint-disable-next-line + console.log('MediaOriginBanner: ', media_cluster_origin, media_cluster_relationship, timestamp, user); return ( ( mainProjectMediaId={projectMedia.id} media_cluster_origin={relationship.node.target?.media_cluster_origin} media_cluster_origin_timestamp={relationship.node.target?.media_cluster_origin_timestamp} - media_cluster_origin_user={relationship.node.target?.media_cluster_origin_user.name} - media_cluster_relationship={relationship.node.target?.media_cluster_relationship} + media_cluster_origin_user={relationship.node.target?.media_cluster_origin_user?.name} + media_cluster_relationship={relationship.node.target?.media_cluster_relationship.target.title} relationship={relationship.node} relationshipSourceId={relationship.node.source_id} relationshipTargetId={relationship.node.target_id} @@ -82,14 +82,9 @@ export default createFragmentContainer(MediaSimilaritiesComponent, graphql` } media_cluster_origin_timestamp media_cluster_relationship { - dbid - user_id - confirmed_at - weight - source_field - target_field - model - user { name } + target{ + title + } confirmed_by { name } } dbid From 12279456c7d73cd05364bbf334f3e46079c93fa1 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Mon, 20 Jan 2025 20:55:00 -0300 Subject: [PATCH 03/12] refactoring and renaming props --- .../components/media/MediaOriginBanner.json | 6 ++-- .../MediaAndRequestsDialogComponent.js | 2 +- src/app/components/media/MediaOriginBanner.js | 32 ++++++++++--------- .../Similarity/MediaSimilaritiesComponent.js | 6 ++-- 4 files changed, 25 insertions(+), 21 deletions(-) diff --git a/localization/react-intl/src/app/components/media/MediaOriginBanner.json b/localization/react-intl/src/app/components/media/MediaOriginBanner.json index f017423816..f3c4b77170 100644 --- a/localization/react-intl/src/app/components/media/MediaOriginBanner.json +++ b/localization/react-intl/src/app/components/media/MediaOriginBanner.json @@ -7,17 +7,17 @@ { "id": "mediaOriginBanner.userAdded", "description": "Message for User Added", - "defaultMessage": "This media was added to the cluster by {user}," + "defaultMessage": "This media was added to the cluster by {media_cluster_origin_user}," }, { "id": "mediaOriginBanner.userMerged", "description": "Message for User Merged", - "defaultMessage": "This media was merged to the cluster by {user}," + "defaultMessage": "This media was merged to the cluster by {media_cluster_origin_user}," }, { "id": "mediaOriginBanner.userMatched", "description": "Message for User Matched", - "defaultMessage": "This media was added to the cluster by {user} when accepted from {cluster}," + "defaultMessage": "This media was added to the cluster by {media_cluster_origin_confirmed_by} when accepted from {media_cluster_origin_title}," }, { "id": "mediaOriginBanner.autoMatched", diff --git a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js index 1c2ad75c39..57886c6c04 100644 --- a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js +++ b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js @@ -63,7 +63,7 @@ const MediaAndRequestsDialogComponent = ({ { context === 'workspace' ? <>
- +
diff --git a/src/app/components/media/MediaOriginBanner.js b/src/app/components/media/MediaOriginBanner.js index 6a2d62e098..11efc043c2 100644 --- a/src/app/components/media/MediaOriginBanner.js +++ b/src/app/components/media/MediaOriginBanner.js @@ -11,11 +11,14 @@ import CheckMediaOrigin from '../../CheckMediaOrigin'; import { parseStringUnixTimestamp } from '../../helpers'; import TimeBefore from '../TimeBefore'; -const getIconAndMessage = (media_cluster_origin, media_cluster_relationship, user, cluster, timestamp) => { +const getIconAndMessage = (media_cluster_origin, media_cluster_relationship, media_cluster_origin_user, media_cluster_origin_timestamp) => { // The default messages are temporary, and will be updated in the ticket CV2-5785 - const formattedTimestamp = ; + const formattedTimestamp = ; + const media_cluster_origin_confirmed_by = media_cluster_relationship?.confirmed_by?.name; + const media_cluster_origin_title = media_cluster_relationship?.target?.title; + // eslint-disable-next-line - console.log('formattedTimestamp: ',formattedTimestamp) + console.log('formattedTimestamp: ',parseStringUnixTimestamp(media_cluster_origin_timestamp), formattedTimestamp) switch (media_cluster_origin) { case CheckMediaOrigin.TIPLINE_SUBMITTED: return { @@ -26,7 +29,6 @@ const getIconAndMessage = (media_cluster_origin, media_cluster_relationship, use defaultMessage="This media was submitted via Tipline, " description="Message for Tipline Submitted" id="mediaOriginBanner.tiplineSubmitted" - values={{ timestamp }} /> {formattedTimestamp} @@ -38,10 +40,10 @@ const getIconAndMessage = (media_cluster_origin, media_cluster_relationship, use message: ( <> {formattedTimestamp} @@ -53,10 +55,10 @@ const getIconAndMessage = (media_cluster_origin, media_cluster_relationship, use message: ( <> {formattedTimestamp} @@ -68,10 +70,10 @@ const getIconAndMessage = (media_cluster_origin, media_cluster_relationship, use message: ( <> {formattedTimestamp} @@ -101,12 +103,12 @@ const getIconAndMessage = (media_cluster_origin, media_cluster_relationship, use }; const MediaOriginBanner = ({ - media_cluster_origin, media_cluster_relationship, timestamp, user, + media_cluster_origin, media_cluster_origin_timestamp, media_cluster_origin_user, media_cluster_relationship, }) => { - const { icon, message } = getIconAndMessage(media_cluster_origin, user, media_cluster_relationship, timestamp); + const { icon, message } = getIconAndMessage(media_cluster_origin, media_cluster_relationship, media_cluster_origin_user, media_cluster_origin_timestamp); // eslint-disable-next-line - console.log('MediaOriginBanner: ', media_cluster_origin, media_cluster_relationship, timestamp, user); + console.log('MediaOriginBanner: ', media_cluster_origin, media_cluster_relationship, media_cluster_origin_timestamp, media_cluster_origin_user); return ( ( media_cluster_origin={relationship.node.target?.media_cluster_origin} media_cluster_origin_timestamp={relationship.node.target?.media_cluster_origin_timestamp} media_cluster_origin_user={relationship.node.target?.media_cluster_origin_user?.name} - media_cluster_relationship={relationship.node.target?.media_cluster_relationship.target.title} + media_cluster_relationship={relationship.node.target?.media_cluster_relationship} relationship={relationship.node} relationshipSourceId={relationship.node.source_id} relationshipTargetId={relationship.node.target_id} @@ -85,7 +85,9 @@ export default createFragmentContainer(MediaSimilaritiesComponent, graphql` target{ title } - confirmed_by { name } + confirmed_by { + name + } } dbid title From ea3b53f4d4cf5cd9e7b13fa156c4326c8d801813 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Mon, 20 Jan 2025 21:10:35 -0300 Subject: [PATCH 04/12] more code cleanup --- .../src/app/components/media/MediaOrigin.json | 6 ++--- .../MediaAndRequestsDialogComponent.js | 3 --- .../components/media/MediaCardLargeFooter.js | 4 ++-- src/app/components/media/MediaOrigin.js | 24 +++++++++---------- src/app/components/media/MediaOriginBanner.js | 14 ++++++----- .../media/Similarity/MediaRelationship.js | 8 ++----- 6 files changed, 27 insertions(+), 32 deletions(-) diff --git a/localization/react-intl/src/app/components/media/MediaOrigin.json b/localization/react-intl/src/app/components/media/MediaOrigin.json index 1527b55ba5..7eb2d24be8 100644 --- 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": "{user} uploaded this media using the Check interface" + "defaultMessage": "{media_cluster_origin_user} uploaded this media using the Check interface" }, { "id": "mediaOrigin.userMerged", @@ -27,7 +27,7 @@ { "id": "mediaOrigin.userMergedTooltip", "description": "Tooltip message for User Merged", - "defaultMessage": "{user} added this media by merging from another cluster" + "defaultMessage": "{media_cluster_origin_user} added this media by merging from another cluster" }, { "id": "mediaOrigin.userMatched", @@ -37,7 +37,7 @@ { "id": "mediaOrigin.userMatchedTooltip", "description": "Tooltip message for User Matched", - "defaultMessage": "{user} accepted this media as a suggested match" + "defaultMessage": "{media_cluster_origin_user} accepted this media as a suggested match" }, { "id": "mediaOrigin.autoMatched", diff --git a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js index 57886c6c04..2553f6ebe7 100644 --- a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js +++ b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js @@ -29,9 +29,6 @@ const MediaAndRequestsDialogComponent = ({ }) => { const [context, setContext] = React.useState(projectMediaId ? 'workspace' : 'feed'); - // eslint-disable-next-line - console.log("Dialog: ", media_cluster_origin, media_cluster_origin_user, media_cluster_origin_timestamp, media_cluster_relationship); - return ( ), ]} diff --git a/src/app/components/media/MediaOrigin.js b/src/app/components/media/MediaOrigin.js index 54a6a6b4ce..f49c6c0322 100644 --- 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 = (media_cluster_origin, media_cluster_origin_user) => { + switch (media_cluster_origin) { case CheckMediaOrigin.TIPLINE_SUBMITTED: return { icon: , @@ -42,10 +42,10 @@ const getIconAndMessage = (type, user) => { ), tooltipMessage: ( ), }; @@ -61,10 +61,10 @@ const getIconAndMessage = (type, user) => { ), tooltipMessage: ( ), }; @@ -80,10 +80,10 @@ const getIconAndMessage = (type, user) => { ), tooltipMessage: ( ), }; @@ -114,8 +114,8 @@ const getIconAndMessage = (type, user) => { } }; -const MediaOrigin = ({ type, user }) => { - const { icon, message, tooltipMessage } = getIconAndMessage(type, user); +const MediaOrigin = ({ media_cluster_origin, media_cluster_origin_user }) => { + const { icon, message, tooltipMessage } = getIconAndMessage(media_cluster_origin, media_cluster_origin_user); return ( { MediaOrigin.propTypes = { - type: PropTypes.number.isRequired, - user: PropTypes.string.isRequired, + media_cluster_origin: PropTypes.number.isRequired, + media_cluster_origin_user: PropTypes.string.isRequired, }; export default MediaOrigin; diff --git a/src/app/components/media/MediaOriginBanner.js b/src/app/components/media/MediaOriginBanner.js index 11efc043c2..90f738a9a8 100644 --- a/src/app/components/media/MediaOriginBanner.js +++ b/src/app/components/media/MediaOriginBanner.js @@ -17,8 +17,6 @@ const getIconAndMessage = (media_cluster_origin, media_cluster_relationship, med const media_cluster_origin_confirmed_by = media_cluster_relationship?.confirmed_by?.name; const media_cluster_origin_title = media_cluster_relationship?.target?.title; - // eslint-disable-next-line - console.log('formattedTimestamp: ',parseStringUnixTimestamp(media_cluster_origin_timestamp), formattedTimestamp) switch (media_cluster_origin) { case CheckMediaOrigin.TIPLINE_SUBMITTED: return { @@ -107,9 +105,6 @@ const MediaOriginBanner = ({ }) => { const { icon, message } = getIconAndMessage(media_cluster_origin, media_cluster_relationship, media_cluster_origin_user, media_cluster_origin_timestamp); - // eslint-disable-next-line - console.log('MediaOriginBanner: ', media_cluster_origin, media_cluster_relationship, media_cluster_origin_timestamp, media_cluster_origin_user); - return ( {message}} @@ -124,7 +119,14 @@ MediaOriginBanner.propTypes = { media_cluster_origin: PropTypes.number.isRequired, media_cluster_origin_timestamp: PropTypes.number.isRequired, media_cluster_origin_user: PropTypes.string.isRequired, - media_cluster_relationship: PropTypes.string.isRequired, + media_cluster_relationship: PropTypes.shape({ + confirmed_by: PropTypes.shape({ + name: PropTypes.string, + }), + target: PropTypes.shape({ + title: PropTypes.string, + }), + }).isRequired, }; export default MediaOriginBanner; diff --git a/src/app/components/media/Similarity/MediaRelationship.js b/src/app/components/media/Similarity/MediaRelationship.js index 020269684c..b0ae881393 100644 --- a/src/app/components/media/Similarity/MediaRelationship.js +++ b/src/app/components/media/Similarity/MediaRelationship.js @@ -281,10 +281,6 @@ const MediaRelationship = ({ }) => { const [isSelected, setIsSelected] = React.useState(false); - // eslint-disable-next-line - console.log('MediaCluster', media_cluster_origin, media_cluster_origin_user); - // eslint-disable-next-line - console.log('MediaRelantioship', media_cluster_relationship); const swallowClick = (ev) => { // Don't close Dialog when clicking on it ev.stopPropagation(); @@ -311,8 +307,8 @@ const MediaRelationship = ({ /> ), ( )]; From 8954e9d65afcc6be4d3d115c0dbaab3412fe02f0 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Mon, 20 Jan 2025 21:13:42 -0300 Subject: [PATCH 05/12] remove component from sandbox --- src/app/components/cds/Sandbox.js | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/src/app/components/cds/Sandbox.js b/src/app/components/cds/Sandbox.js index 536a02b340..de01d408db 100644 --- 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 }) => { @@ -2389,30 +2387,6 @@ const SandboxComponent = ({ admin }) => {
} - { (categoryTab === 'all' || categoryTab === 'media-cluster-origin-buttons') && ( -
-
-
- Media Origin Banner - - - - - - - - - -
-
-
- )}
); }; From 567950f73b6736f6e53d6e454af6b584616babe0 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Mon, 20 Jan 2025 21:29:02 -0300 Subject: [PATCH 06/12] updating unit tests --- src/app/components/media/MediaOrigin.test.js | 12 +++++------ .../media/MediaOriginBanner.test.js | 20 +++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/app/components/media/MediaOrigin.test.js b/src/app/components/media/MediaOrigin.test.js index 060aa9078c..1fe0a5d78a 100644 --- 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('', () => { it('should render a button with the correct icon and message for each type', () => { - const tiplineSubmitted = mountWithIntl(); + const tiplineSubmitted = mountWithIntl(); expect(tiplineSubmitted.find(Tipline).length).toEqual(1); expect(tiplineSubmitted.html()).toMatch('Tipline Submitted'); - const userAdded = mountWithIntl(); + const userAdded = mountWithIntl(); expect(userAdded.find(PersonAdd).length).toEqual(1); expect(userAdded.html()).toMatch('User Added'); - const userMerged = mountWithIntl(); + const userMerged = mountWithIntl(); expect(userMerged.find(Person).length).toEqual(1); expect(userMerged.html()).toMatch('User Merged'); - const userMatched = mountWithIntl(); + const userMatched = mountWithIntl(); expect(userMatched.find(PersonCheck).length).toEqual(1); expect(userMatched.html()).toMatch('User Matched'); - const autoMatched = mountWithIntl(); + const autoMatched = mountWithIntl(); expect(autoMatched.find(Bolt).length).toEqual(1); expect(autoMatched.html()).toMatch('Auto Matched'); }); it('should return null for invalid type', () => { - const wrapper = mountWithIntl(); + const wrapper = mountWithIntl(); expect(wrapper.find('FormattedMessage').length).toEqual(0); }); }); diff --git a/src/app/components/media/MediaOriginBanner.test.js b/src/app/components/media/MediaOriginBanner.test.js index da3fd20cd6..0e5907244b 100644 --- a/src/app/components/media/MediaOriginBanner.test.js +++ b/src/app/components/media/MediaOriginBanner.test.js @@ -9,33 +9,33 @@ import Tipline from '../../icons/question_answer.svg'; import CheckMediaOrigin from '../../CheckMediaOrigin'; describe('', () => { - const timestamp = 1736876257; - const cluster = 'Cluster A'; - const user = 'Bruce'; + const media_cluster_origin_timestamp = 1736876257; + const media_cluster_relationship ={ confirmed_by: {name: 'Cluster A'}, target: { title: 'Cluster B' }}; + const media_cluster_origin_user = 'Bruce'; it('should render a banner with the correct icon and message for each type', () => { - const tiplineSubmitted = mountWithIntl(); + const tiplineSubmitted = mountWithIntl(); expect(tiplineSubmitted.find(Tipline).length).toEqual(1); expect(tiplineSubmitted.html()).toContain('This media was submitted via Tipline'); - const userAdded = mountWithIntl(); + const userAdded = mountWithIntl(); expect(userAdded.find(PersonAdd).length).toEqual(1); expect(userAdded.html()).toContain('This media was added to the cluster by'); - const userMerged = mountWithIntl(); + const userMerged = mountWithIntl(); expect(userMerged.find(Person).length).toEqual(1); - expect(userMerged.html()).toContain('This media was added to the cluster by'); + expect(userMerged.html()).toContain('This media was merged to the cluster by'); - const userMatched = mountWithIntl(); + const userMatched = mountWithIntl(); expect(userMatched.find(PersonCheck).length).toEqual(1); expect(userMatched.html()).toContain('This media was added to the cluster by'); - const autoMatched = mountWithIntl(); + const autoMatched = mountWithIntl(); expect(autoMatched.find(Bolt).length).toEqual(1); expect(autoMatched.html()).toContain('This media was automatically matched to the cluster'); }); it('should return null for invalid type', () => { - const wrapper = mountWithIntl(); + const wrapper = mountWithIntl(); expect(wrapper.find('FormattedMessage').length).toEqual(0); }); }); From 0053975a081115409d82d249e5250ddfb88761d8 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Tue, 21 Jan 2025 10:54:31 -0300 Subject: [PATCH 07/12] Fix linter problems --- src/app/components/media/MediaOrigin.test.js | 6 +++--- src/app/components/media/MediaOriginBanner.test.js | 14 +++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/app/components/media/MediaOrigin.test.js b/src/app/components/media/MediaOrigin.test.js index 1fe0a5d78a..fb9f0ce330 100644 --- a/src/app/components/media/MediaOrigin.test.js +++ b/src/app/components/media/MediaOrigin.test.js @@ -10,7 +10,7 @@ import CheckMediaOrigin from '../../CheckMediaOrigin'; describe('', () => { it('should render a button with the correct icon and message for each type', () => { - const tiplineSubmitted = mountWithIntl(); + const tiplineSubmitted = mountWithIntl(); expect(tiplineSubmitted.find(Tipline).length).toEqual(1); expect(tiplineSubmitted.html()).toMatch('Tipline Submitted'); @@ -26,13 +26,13 @@ describe('', () => { expect(userMatched.find(PersonCheck).length).toEqual(1); expect(userMatched.html()).toMatch('User Matched'); - const autoMatched = mountWithIntl(); + const autoMatched = mountWithIntl(); expect(autoMatched.find(Bolt).length).toEqual(1); expect(autoMatched.html()).toMatch('Auto Matched'); }); it('should return null for invalid type', () => { - const wrapper = mountWithIntl(); + const wrapper = mountWithIntl(); expect(wrapper.find('FormattedMessage').length).toEqual(0); }); }); diff --git a/src/app/components/media/MediaOriginBanner.test.js b/src/app/components/media/MediaOriginBanner.test.js index 0e5907244b..719b52704f 100644 --- a/src/app/components/media/MediaOriginBanner.test.js +++ b/src/app/components/media/MediaOriginBanner.test.js @@ -10,32 +10,32 @@ import CheckMediaOrigin from '../../CheckMediaOrigin'; describe('', () => { const media_cluster_origin_timestamp = 1736876257; - const media_cluster_relationship ={ confirmed_by: {name: 'Cluster A'}, target: { title: 'Cluster B' }}; + const media_cluster_relationship = { confirmed_by: { name: 'Cluster A' }, target: { title: 'Cluster B' } }; const media_cluster_origin_user = 'Bruce'; it('should render a banner with the correct icon and message for each type', () => { - const tiplineSubmitted = mountWithIntl(); + const tiplineSubmitted = mountWithIntl(); expect(tiplineSubmitted.find(Tipline).length).toEqual(1); expect(tiplineSubmitted.html()).toContain('This media was submitted via Tipline'); - const userAdded = mountWithIntl(); + const userAdded = mountWithIntl(); expect(userAdded.find(PersonAdd).length).toEqual(1); expect(userAdded.html()).toContain('This media was added to the cluster by'); - const userMerged = mountWithIntl(); + const userMerged = mountWithIntl(); expect(userMerged.find(Person).length).toEqual(1); expect(userMerged.html()).toContain('This media was merged to the cluster by'); - const userMatched = mountWithIntl(); + const userMatched = mountWithIntl(); expect(userMatched.find(PersonCheck).length).toEqual(1); expect(userMatched.html()).toContain('This media was added to the cluster by'); - const autoMatched = mountWithIntl(); + const autoMatched = mountWithIntl(); expect(autoMatched.find(Bolt).length).toEqual(1); expect(autoMatched.html()).toContain('This media was automatically matched to the cluster'); }); it('should return null for invalid type', () => { - const wrapper = mountWithIntl(); + const wrapper = mountWithIntl(); expect(wrapper.find('FormattedMessage').length).toEqual(0); }); }); From da5c7006ebb3cfad5a0cdf571f1997aa88bda505 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Tue, 21 Jan 2025 14:53:17 -0300 Subject: [PATCH 08/12] apply PR review --- .../react-intl/src/app/components/media/MediaOrigin.json | 4 ++-- .../src/app/components/media/MediaOriginBanner.json | 8 ++++---- src/app/components/media/MediaOrigin.js | 4 ++-- src/app/components/media/MediaOriginBanner.js | 8 ++++---- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/localization/react-intl/src/app/components/media/MediaOrigin.json b/localization/react-intl/src/app/components/media/MediaOrigin.json index 7eb2d24be8..bf316fd70e 100644 --- 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": "{media_cluster_origin_user} uploaded this media using the Check interface" + "defaultMessage": "{media_cluster_origin_user} uploaded this media using Check" }, { "id": "mediaOrigin.userMerged", @@ -27,7 +27,7 @@ { "id": "mediaOrigin.userMergedTooltip", "description": "Tooltip message for User Merged", - "defaultMessage": "{media_cluster_origin_user} added this media by merging from another cluster" + "defaultMessage": "{media_cluster_origin_user} 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 index f3c4b77170..a72d8d0560 100644 --- a/localization/react-intl/src/app/components/media/MediaOriginBanner.json +++ b/localization/react-intl/src/app/components/media/MediaOriginBanner.json @@ -7,21 +7,21 @@ { "id": "mediaOriginBanner.userAdded", "description": "Message for User Added", - "defaultMessage": "This media was added to the cluster by {media_cluster_origin_user}," + "defaultMessage": "This media was added to the cluster of media by {media_cluster_origin_user}," }, { "id": "mediaOriginBanner.userMerged", "description": "Message for User Merged", - "defaultMessage": "This media was merged to the cluster by {media_cluster_origin_user}," + "defaultMessage": "This media was merged into this cluster of media by {media_cluster_origin_user}," }, { "id": "mediaOriginBanner.userMatched", "description": "Message for User Matched", - "defaultMessage": "This media was added to the cluster by {media_cluster_origin_confirmed_by} when accepted from {media_cluster_origin_title}," + "defaultMessage": "This media was added to the cluster of media by {media_cluster_origin_confirmed_by} when accepted from {media_cluster_origin_title}," }, { "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," } ] \ No newline at end of file diff --git a/src/app/components/media/MediaOrigin.js b/src/app/components/media/MediaOrigin.js index f49c6c0322..38d4cf6fed 100644 --- a/src/app/components/media/MediaOrigin.js +++ b/src/app/components/media/MediaOrigin.js @@ -42,7 +42,7 @@ const getIconAndMessage = (media_cluster_origin, media_cluster_origin_user) => { ), tooltipMessage: ( { ), tooltipMessage: ( From a579be2b0a8048e43729c6a4072e56d103b64f75 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Tue, 21 Jan 2025 15:01:40 -0300 Subject: [PATCH 09/12] remove more debugs --- src/app/components/cds/Sandbox.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/app/components/cds/Sandbox.js b/src/app/components/cds/Sandbox.js index de01d408db..da3f8f5cf1 100644 --- a/src/app/components/cds/Sandbox.js +++ b/src/app/components/cds/Sandbox.js @@ -484,10 +484,6 @@ const SandboxComponent = ({ admin }) => { label: 'Tabs', value: 'tabs', }, - { - label: 'Media Cluster Origin Buttons', - value: 'media-cluster-origin-buttons', - }, ]} value={categoryTab} wrapContent From 582c34631bcd08e6bc1a7a7bbe33d352be378336 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Tue, 21 Jan 2025 15:59:03 -0300 Subject: [PATCH 10/12] apply PR programing with Alex --- .../MediaAndRequestsDialogComponent.js | 10 ++++------ .../components/media/Similarity/MediaRelationship.js | 9 +++++++++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js index 2553f6ebe7..8235e969f7 100644 --- a/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js +++ b/src/app/components/cds/menus-lists-dialogs/MediaAndRequestsDialogComponent.js @@ -10,16 +10,12 @@ import MediaRequests from '../../media/MediaRequests'; import { MediaCardLargeQueryRenderer } from '../../media/MediaCardLarge'; import FeedItemMediaDialog from '../../feed/FeedItemMediaDialog'; import dialogStyles from '../../../styles/css/dialog.module.css'; -import MediaOriginBanner from '../../media/MediaOriginBanner'; import styles from './MediaAndRequestsDialog.module.css'; const MediaAndRequestsDialogComponent = ({ dialogTitle, feedId, - media_cluster_origin, - media_cluster_origin_timestamp, - media_cluster_origin_user, - media_cluster_relationship, + media_origin_banner, mediaHeader, mediaSlug, onClick, @@ -60,7 +56,7 @@ const MediaAndRequestsDialogComponent = ({ { context === 'workspace' ? <>
- + {media_origin_banner}
@@ -101,6 +97,7 @@ const MediaAndRequestsDialogComponent = ({ MediaAndRequestsDialogComponent.defaultProps = { dialogTitle: '', mediaHeader: null, + media_origin_banner: null, projectMediaImportedId: null, feedId: null, }; @@ -110,6 +107,7 @@ MediaAndRequestsDialogComponent.propTypes = { feedId: PropTypes.number, mediaHeader: PropTypes.element, mediaSlug: PropTypes.element.isRequired, + media_origin_banner: PropTypes.element, projectMediaId: PropTypes.number.isRequired, projectMediaImportedId: PropTypes.number, onClick: PropTypes.func.isRequired, diff --git a/src/app/components/media/Similarity/MediaRelationship.js b/src/app/components/media/Similarity/MediaRelationship.js index b0ae881393..1b7592ddc4 100644 --- a/src/app/components/media/Similarity/MediaRelationship.js +++ b/src/app/components/media/Similarity/MediaRelationship.js @@ -25,6 +25,7 @@ import MediaIdentifier from '../../cds/media-cards/MediaIdentifier'; import LastRequestDate from '../../cds/media-cards/LastRequestDate'; import RequestsCount from '../../cds/media-cards/RequestsCount'; import MediaOrigin from '../MediaOrigin'; +import MediaOriginBanner from '../MediaOriginBanner'; import styles from '../media.module.css'; import similarityStyles from './MediaSimilarities.module.css'; @@ -331,6 +332,14 @@ const MediaRelationship = ({ media_cluster_origin_timestamp={media_cluster_origin_timestamp} media_cluster_origin_user={media_cluster_origin_user} media_cluster_relationship={media_cluster_relationship} + media_origin_banner={ + + } projectMediaId={relationship.target_id} projectMediaImportedId={relationship?.target?.imported_from_project_media_id} onClick={swallowClick} From ad7b79dd2227c95603f445ce000a638f2a9775f7 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Tue, 21 Jan 2025 16:29:52 -0300 Subject: [PATCH 11/12] update tests --- src/app/components/media/MediaOriginBanner.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/components/media/MediaOriginBanner.test.js b/src/app/components/media/MediaOriginBanner.test.js index 719b52704f..564c194a0e 100644 --- a/src/app/components/media/MediaOriginBanner.test.js +++ b/src/app/components/media/MediaOriginBanner.test.js @@ -19,19 +19,19 @@ describe('', () => { const userAdded = mountWithIntl(); expect(userAdded.find(PersonAdd).length).toEqual(1); - expect(userAdded.html()).toContain('This media was added to the cluster by'); + expect(userAdded.html()).toContain('This media was added to the cluster of media by'); const userMerged = mountWithIntl(); expect(userMerged.find(Person).length).toEqual(1); - expect(userMerged.html()).toContain('This media was merged to the cluster by'); + expect(userMerged.html()).toContain('his media was merged into this cluster of media by'); const userMatched = mountWithIntl(); expect(userMatched.find(PersonCheck).length).toEqual(1); - expect(userMatched.html()).toContain('This media was added to the cluster by'); + expect(userMatched.html()).toContain('This media was added to the cluster of media by'); const autoMatched = mountWithIntl(); expect(autoMatched.find(Bolt).length).toEqual(1); - expect(autoMatched.html()).toContain('This media was automatically matched to the cluster'); + expect(autoMatched.html()).toContain('This media was automatically matched to the cluster of media,'); }); it('should return null for invalid type', () => { From 47bb4285484276659baa9b3b71016ad552c69828 Mon Sep 17 00:00:00 2001 From: danielevalverde Date: Tue, 21 Jan 2025 20:04:36 -0300 Subject: [PATCH 12/12] add MediaOriginBanner to MediaComponent --- src/app/components/media/MediaComponent.js | 22 +++++++++++++++++++ src/app/components/media/MediaOriginBanner.js | 6 ++++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/app/components/media/MediaComponent.js b/src/app/components/media/MediaComponent.js index 750d0bc699..0f5e193371 100644 --- 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'; @@ -214,6 +215,14 @@ class MediaComponent extends Component { )]} /> } + media_origin_banner={ + + } 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 diff --git a/src/app/components/media/MediaOriginBanner.js b/src/app/components/media/MediaOriginBanner.js index 59c8253205..809a2e5306 100644 --- a/src/app/components/media/MediaOriginBanner.js +++ b/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;