Feature/cv2 4630 remove article from item (#2000)

* created remove article button * button with confirmation modal * Added Remove Article button, currently just for Explainer, will add Fact Check next * added remove fact check by updating claim description project media to null * fixed styling issues after fixing merge conflict * wrong type for id
meedan · Jul 22, 2024 · 612ffc6 · 612ffc6
1 parent 710ced9
commit 612ffc6
Show file tree

Hide file tree

Showing 5 changed files with 321 additions and 63 deletions.
diff --git a/localization/react-intl/src/app/components/article/RemoveArticleButton.json b/localization/react-intl/src/app/components/article/RemoveArticleButton.json
@@ -0,0 +1,27 @@
+[
+  {
+    "id": "removedArticleButton.tooltip",
+    "description": "Tooltip message displayed on remove article button when it is disabled.",
+    "defaultMessage": "You can't remove this article."
+  },
+  {
+    "id": "removeArticleWrapperButton.success",
+    "description": "Banner displayed after an article is successfully removed from an item.",
+    "defaultMessage": "Article successfully removed from item."
+  },
+  {
+    "id": "removeArticleButton.confirmationDialogTitle",
+    "description": "Title displayed on a confirmation modal when a user tries to remove an article.",
+    "defaultMessage": "Are you sure you want to remove this article?"
+  },
+  {
+    "id": "removeArticleButton.confirmationDialogBody",
+    "description": "Confirmation message displayed on a modal when a user tries to remove an article.",
+    "defaultMessage": "This article will no longer be associated with this media item but remain in your workspace."
+  },
+  {
+    "id": "removeArticleButton.removeButton",
+    "description": "Button label to remove article from item",
+    "defaultMessage": "Remove article"
+  }
+]
diff --git a/src/app/components/article/ArticleCard.module.css b/src/app/components/article/ArticleCard.module.css
@@ -10,7 +10,6 @@
     }
 
     .mediaArticleCard {
-      flex-direction: column;
       gap: 3px;
 
       .articleCardHeader {
@@ -35,6 +34,14 @@
         }
       }
 
+      .mediaArticleCardDescription {
+        align-items: flex-start;
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
       :global(.article-url) a {
         -webkit-box-orient: vertical;
         display: -webkit-box; /* stylelint-disable-line */
@@ -45,3 +52,12 @@
     }
   }
 }
+
+.articleCardRight {
+  align-items: flex-end;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  text-align: right;
+  width: 150px;
+}
diff --git a/src/app/components/article/MediaArticleCard.js b/src/app/components/article/MediaArticleCard.js
@@ -14,6 +14,7 @@ import LastRequestDate from '../cds/media-cards/LastRequestDate';
 import ArticleUrl from '../cds/media-cards/ArticleUrl';
 import ItemReportStatus from '../cds/media-cards/ItemReportStatus';
 import ButtonMain from '../cds/buttons-checkboxes-chips/ButtonMain';
+import RemoveArticleButton from './RemoveArticleButton';
 
 const MediaArticleCard = ({
   title,
@@ -25,75 +26,81 @@ const MediaArticleCard = ({
   publishedAt,
   variant,
   onClick,
+  id,
 }) => (
   <div className={cx('article-card', styles.articleCard, styles.mediaArticleCardWrapper)}>
     <Card className={styles.mediaArticleCard}>
-      <div className={cx('typography-body2-bold', styles.articleCardHeader)}>
-        <div className={styles.articleType}>
-          <div className={styles.articleIcon}>
-            { variant === 'fact-check' && <FactCheckIcon /> }
-            { variant === 'explainer' && <BookIcon /> }
+      <div className={styles.mediaArticleCardDescription}>
+        <div className={cx('typography-body2-bold', styles.articleCardHeader)}>
+          <div className={styles.articleType}>
+            <div className={styles.articleIcon}>
+              { variant === 'fact-check' && <FactCheckIcon /> }
+              { variant === 'explainer' && <BookIcon /> }
+            </div>
+            { variant === 'fact-check' && <FormattedMessage id="mediaArticleCard.factCheck" defaultMessage="Fact-Check" description="Title in an article card on item page." /> }
+            { variant === 'explainer' && <FormattedMessage id="mediaArticleCard.explainer" defaultMessage="Explainer" description="Title in an article card on item page." /> }
+            { statusLabel && ': ' }
           </div>
-          { variant === 'fact-check' && <FormattedMessage id="mediaArticleCard.factCheck" defaultMessage="Fact-Check" description="Title in an article card on item page." /> }
-          { variant === 'explainer' && <FormattedMessage id="mediaArticleCard.explainer" defaultMessage="Explainer" description="Title in an article card on item page." /> }
-          { statusLabel && ': ' }
+          { statusLabel && <div><EllipseIcon style={{ color: statusColor }} /> {statusLabel}</div> }
         </div>
-        { statusLabel && <div><EllipseIcon style={{ color: statusColor }} /> {statusLabel}</div> }
-      </div>
-      <div
-        className={cx(
-          cardStyles.cardSummary,
-          cardStyles.cardSummaryCollapsed,
-        )}
-      >
-        <div className={cardStyles.cardSummaryContent}>
-          { url ?
-            <ArticleUrl url={url} title={title} variant={variant} showIcon={false} linkText={title} />
-            :
-            <span className={cx(cardStyles.cardDescription)}>
-              {title}
-            </span>
-          }
+        <div
+          className={cx(
+            cardStyles.cardSummary,
+            cardStyles.cardSummaryCollapsed,
+          )}
+        >
+          <div className={cardStyles.cardSummaryContent}>
+            { url ?
+              <ArticleUrl url={url} title={title} variant={variant} showIcon={false} linkText={title} />
+              :
+              <span className={cx(cardStyles.cardDescription)}>
+                {title}
+              </span>
+            }
+          </div>
         </div>
-      </div>
-      <BulletSeparator
-        details={[
-          variant === 'fact-check' && (<ItemReportStatus
-            publishedAt={publishedAt ? new Date(publishedAt * 1000) : null}
-            isPublished={Boolean(publishedAt)}
-            variant="text"
-            theme="lightText"
-            tooltip={false}
-          />),
-          languageCode && (
-            <Language
-              languageCode={languageCode}
+        <BulletSeparator
+          details={[
+            variant === 'fact-check' && (<ItemReportStatus
+              publishedAt={publishedAt ? new Date(publishedAt * 1000) : null}
+              isPublished={Boolean(publishedAt)}
               variant="text"
               theme="lightText"
-            />
-          ),
-          date && (
-            <LastRequestDate
               tooltip={false}
-              variant="text"
-              theme="lightText"
-              lastRequestDate={new Date(date * 1000)}
-            />
-          ),
-          (
-            <ButtonMain
-              buttonProps={{
-                type: null,
-              }}
-              label={<FormattedMessage id="mediaArticleCard.editButton" defaultMessage="Edit Article" description="Label for edit button" />}
-              variant="contained"
-              size="small"
-              theme="text"
-              onClick={onClick}
-            />
-          ),
-        ]}
-      />
+            />),
+            languageCode && (
+              <Language
+                languageCode={languageCode}
+                variant="text"
+                theme="lightText"
+              />
+            ),
+            date && (
+              <LastRequestDate
+                tooltip={false}
+                variant="text"
+                theme="lightText"
+                lastRequestDate={new Date(date * 1000)}
+              />
+            ),
+            (
+              <ButtonMain
+                buttonProps={{
+                  type: null,
+                }}
+                label={<FormattedMessage id="mediaArticleCard.editButton" defaultMessage="Edit Article" description="Label for edit button" />}
+                variant="contained"
+                size="small"
+                theme="text"
+                onClick={onClick}
+              />
+            ),
+          ]}
+        />
+      </div>
+      <div className={styles.articleCardRight}>
+        <RemoveArticleButton id={id} variant={variant} />
+      </div>
     </Card>
   </div>
 );
@@ -117,6 +124,7 @@ MediaArticleCard.propTypes = {
   publishedAt: PropTypes.number, // Timestamp
   variant: PropTypes.oneOf(['explainer', 'fact-check']),
   onClick: PropTypes.func,
+  id: PropTypes.string.isRequired,
 };
 
 export default MediaArticleCard;
diff --git a/src/app/components/article/MediaArticlesDisplay.js b/src/app/components/article/MediaArticlesDisplay.js
@@ -39,6 +39,7 @@ const MediaArticlesDisplay = ({ projectMedia }) => {
           statusColor={currentStatus ? currentStatus.style?.color : null}
           statusLabel={currentStatus ? currentStatus.label : null}
           publishedAt={publishedAt}
+          id={factCheck.claim_description.id}
           onClick={() => { setArticleToEdit(factCheck); }}
         />
         : null
@@ -65,8 +66,6 @@ const MediaArticlesDisplay = ({ projectMedia }) => {
         : null
       }
       { explainerItems.filter(explainerItem => explainerItem !== null).map((explainerItem) => {
-        // FIXME: Use explainerItem.id for removal
-
         const { explainer } = explainerItem;
 
         return (
@@ -79,6 +78,7 @@ const MediaArticlesDisplay = ({ projectMedia }) => {
               variant="explainer"
               title={explainer.title}
               url={explainer.url}
+              id={explainerItem.id}
               languageCode={explainer.language !== 'und' ? explainer.language : null}
               date={explainer.updated_at}
               onClick={() => { setArticleToEdit(explainer); }}
@@ -121,6 +121,7 @@ MediaArticlesDisplay.propTypes = {
       rating: PropTypes.string,
       nodeType: PropTypes.oneOf(['Explainer', 'FactCheck']),
       claim_description: PropTypes.shape({
+        id: PropTypes.number,
         description: PropTypes.string,
       }).isRequired,
     }).isRequired,
@@ -158,6 +159,7 @@ export default createFragmentContainer(MediaArticlesDisplay, graphql`
       report_status
       rating
       claim_description {
+        id
         description
       }
       nodeType: __typename