When choosing a fact-check to add to an item, search for all fact-che…

…cks, not only the ones that are not applied to any media cluster. (#2071)

* When choosing a fact-check to add to an item, search for all fact-checks, not only the ones that are not applied to any media cluster.

But the fact-checks that are already applied to a media cluster are not clickable. A tooltip is displayed with an explanation.

Fixes: CV2-5129.

* update copy and add new hover icon [CV2-5129]

* add opacity change for unavailable fact-checks [CV2-5129]

---------

Co-authored-by: Brian Fleming <brianfleming@gmail.com>

localization/react-intl/src/app/components/article/MediaArticlesCard.json

@@ -1,4 +1,9 @@
 [
+  {
+    "id": "mediaArticlesCard.factcheckInUseTooltip",
+    "description": "Tooltip message displayed on article cards on item page for fact-check type articles.",
+    "defaultMessage": "This Claim & Fact-Check article is already applied to another media cluster<br /><br />Remove it from its current media cluster in order to add it here."
+  },
   {
     "id": "mediaArticlesCard.factcheckTooltip",
     "description": "Tooltip message displayed on article cards on item page for fact-check type articles.",

src/app/components/article/Articles.module.css

@@ -121,5 +121,13 @@
         font-weight: bold;
       }
     }
+
+    &.articlesSidebarCardUnavailable {
+      opacity: .45;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
 }

src/app/components/article/MediaArticlesCard.js

@@ -2,11 +2,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { createFragmentContainer, graphql } from 'react-relay/compat';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import cx from 'classnames/bind';
 import Tooltip from '../cds/alerts-and-prompts/Tooltip';
 import AddIcon from '../../icons/add.svg';
 import BookIcon from '../../icons/book.svg';
+import UnavilableIcon from '../../icons/do_not_disturb.svg';
 import FactCheckIcon from '../../icons/fact_check.svg';
 import EllipseIcon from '../../icons/ellipse.svg';
 import { getStatus, getStatusStyle } from '../../helpers';
@@ -15,6 +16,8 @@ import styles from './Articles.module.css';
 const MediaArticlesCard = ({ article, onAdd, team }) => {
   const [isHovered, setIsHovered] = React.useState(false);
 
+  const factCheckInUse = (article.nodeType === 'FactCheck' && article.claim_description?.project_media?.id && article.claim_description?.project_media?.type !== 'Blank');
+
   const handleMouseEnter = () => {
     setIsHovered(true);
   };
@@ -24,7 +27,7 @@ const MediaArticlesCard = ({ article, onAdd, team }) => {
   };
 
   const handleClick = (e) => {
-    if (onAdd) {
+    if (onAdd && !factCheckInUse) {
       let id = null;
       if (article.nodeType === 'FactCheck') {
         ({ id } = article.claim_description);
@@ -51,14 +54,27 @@ const MediaArticlesCard = ({ article, onAdd, team }) => {
       placement="top"
       title={
         <>
-          { article.nodeType === 'FactCheck' && <FormattedMessage defaultMessage="Add Claim & Fact-Check article to this media cluster" description="Tooltip message displayed on article cards on item page for fact-check type articles." id="mediaArticlesCard.factcheckTooltip" /> }
+          { article.nodeType === 'FactCheck' && factCheckInUse && <FormattedHTMLMessage defaultMessage="This Claim & Fact-Check article is already applied to another media cluster<br /><br />Remove it from its current media cluster in order to add it here." description="Tooltip message displayed on article cards on item page for fact-check type articles." id="mediaArticlesCard.factcheckInUseTooltip" /> }
+          { article.nodeType === 'FactCheck' && !factCheckInUse && <FormattedMessage defaultMessage="Add Claim & Fact-Check article to this media cluster" description="Tooltip message displayed on article cards on item page for fact-check type articles." id="mediaArticlesCard.factcheckTooltip" /> }
           { article.nodeType === 'Explainer' && <FormattedMessage defaultMessage="Add Explainer article to this media cluster" description="Tooltip message displayed on article cards on item page for explainer type articles." id="mediaArticlesCard.explainerTooltip" /> }
         </>
       }
     >
-      <div className={styles.articlesSidebarCard} onClick={handleClick} onKeyDown={handleClick} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <div
+        className={cx(
+          styles.articlesSidebarCard,
+          {
+            [styles.articlesSidebarCardUnavailable]: factCheckInUse,
+          })
+        }
+        onClick={handleClick}
+        onKeyDown={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
         <div className={cx(styles.articlesSidebarCardIcon, 'media-articles-card__card')}>
-          { isHovered && <AddIcon /> }
+          { isHovered && !factCheckInUse && <AddIcon /> }
+          { isHovered && factCheckInUse && <UnavilableIcon /> }
           { article.nodeType === 'Explainer' && !isHovered && <BookIcon /> }
           { article.nodeType === 'FactCheck' && !isHovered && <FactCheckIcon /> }
           { article.nodeType === 'FactCheck' && <FormattedMessage defaultMessage="Claim & Fact-Check" description="Type description of a fact-check article card." id="mediaArticlesCard.factCheck" tagName="small" /> }
@@ -88,6 +104,10 @@ MediaArticlesCard.propTypes = {
     rating: PropTypes.string,
     claim_description: PropTypes.shape({
       id: PropTypes.string,
+      project_media: PropTypes.shape({
+        id: PropTypes.string,
+        type: PropTypes.string,
+      }),
     }),
     nodeType: PropTypes.oneOf(['FactCheck', 'Explainer']).isRequired,
   }).isRequired,
@@ -115,6 +135,10 @@ export default createFragmentContainer(MediaArticlesCard, graphql`
       rating
       claim_description {
         id
+        project_media {
+          id
+          type
+        }
       }
     }
   }

src/app/components/article/MediaArticlesTeamArticles.js

@@ -63,10 +63,10 @@ const MediaArticlesTeamArticles = ({
       environment={Relay.Store}
       key={new Date().getTime()}
       query={graphql`
-        query MediaArticlesTeamArticlesQuery($slug: String!, $textSearch: String!, $numberOfArticles: Int!, $targetId: Int) {
+        query MediaArticlesTeamArticlesQuery($slug: String!, $textSearch: String!, $numberOfArticles: Int!, $targetId: Int, $standalone: Boolean) {
           team(slug: $slug) {
             ...MediaArticlesCard_team
-            factChecks: articles(first: $numberOfArticles, sort: "id", sort_type: "desc", article_type: "fact-check", text: $textSearch, target_id: $targetId, standalone: true) {
+            factChecks: articles(first: $numberOfArticles, sort: "id", sort_type: "desc", article_type: "fact-check", text: $textSearch, target_id: $targetId, standalone: $standalone) {
               edges {
                 node {
                   ... on FactCheck {
@@ -108,6 +108,7 @@ const MediaArticlesTeamArticles = ({
         numberOfArticles,
         targetId,
         timestamp: new Date().getTime(), // No cache
+        standalone: !textSearch,
       }}
     />
   </ErrorBoundary>