Moar articles review cleanup (#2005)

* Use consistent empty state for tags in setttings area and make table look like the rules table more * Clean up privacy requests while reviewing Articles [CV2-4874] * tweak empty annotations message * update scrolling on articles list * add tooltip for remove article button * Change bulk actions language and limit count to the button so the user isn't confused with the pager * add cancel button to existing article slideout * add scroll indicator to articles list on media cluster page * no need to close drawer on media item pages now that we have 2 columns * All to all media in nav and header * minor updates to new fact-check slideout to better match designs
meedan · Jul 18, 2024 · 7cf836b · 7cf836b
1 parent 8310c24
commit 7cf836b
Show file tree

Hide file tree

Showing 30 changed files with 251 additions and 206 deletions.
diff --git a/localization/react-intl/src/app/components/article/ArticleForm.json b/localization/react-intl/src/app/components/article/ArticleForm.json
@@ -67,7 +67,7 @@
   {
     "id": "articleForm.noClaimDescript",
     "description": "Message overlay to tell the user they must complete additional fields to unlock this area",
-    "defaultMessage": "Start by adding Claim information for this Fact-Check"
+    "defaultMessage": "Start by adding Claim information<br />for this Fact-Check"
   },
   {
     "id": "mediaFactCheck.factCheck",

diff --git a/localization/react-intl/src/app/components/article/RemoveArticleButton.json b/localization/react-intl/src/app/components/article/RemoveArticleButton.json
@@ -9,6 +9,11 @@
     "description": "Banner displayed after an article is successfully removed from an item.",
     "defaultMessage": "Article successfully removed from item."
   },
+  {
+    "id": "removeArticleButton.tooltip",
+    "description": "Tooltip message displayed on remove article button.",
+    "defaultMessage": "Remove article from media cluster"
+  },
   {
     "id": "removeArticleButton.confirmationDialogTitle",
     "description": "Title displayed on a confirmation modal when a user tries to remove an article.",

diff --git a/localization/react-intl/src/app/components/drawer/Projects/ProjectsComponent.json b/localization/react-intl/src/app/components/drawer/Projects/ProjectsComponent.json
@@ -6,8 +6,8 @@
   },
   {
     "id": "projectsComponent.allItems",
-    "description": "Label for the 'All items' list displayed on the left sidebar",
-    "defaultMessage": "All"
+    "description": "Label for the 'All media' list displayed on the left sidebar",
+    "defaultMessage": "All Media"
   },
   {
     "id": "projectsComponent.assignedToMe",

diff --git a/localization/react-intl/src/app/components/media/BulkActionsMenu.json b/localization/react-intl/src/app/components/media/BulkActionsMenu.json
@@ -82,6 +82,6 @@
   {
     "id": "bulkActionsMenu.action",
     "description": "Button for popping the actions menu. User has to pick which action to perform upon currently selected items.",
-    "defaultMessage": "Action"
+    "defaultMessage": "Bulk Change [{count}]"
   }
 ]
diff --git a/localization/react-intl/src/app/components/search/AllItems.json b/localization/react-intl/src/app/components/search/AllItems.json
@@ -1,7 +1,7 @@
 [
   {
     "id": "search.allClaimsTitle",
-    "description": "Page title for listing all items in check",
-    "defaultMessage": "All items"
+    "description": "Page title for listing all media items in check",
+    "defaultMessage": "All Media"
   }
 ]
diff --git a/localization/react-intl/src/app/components/search/SearchResults.json b/localization/react-intl/src/app/components/search/SearchResults.json
@@ -24,11 +24,6 @@
     "description": "Pagination count of items returned",
     "defaultMessage": "{count, plural, one {1 / 1} other {{from} - {to} / #}}"
   },
-  {
-    "id": "searchResults.withSelection",
-    "description": "Label for number of selected items",
-    "defaultMessage": "{selectedCount, plural, one {(# selected)} other {(# selected)}}"
-  },
   {
     "id": "search.nextPage",
     "description": "Pagination button to go to next page",

diff --git a/localization/react-intl/src/app/components/task/Tasks.json b/localization/react-intl/src/app/components/task/Tasks.json
@@ -2,7 +2,7 @@
   {
     "id": "tasks.blankAnnotation",
     "description": "A message that appears when the Annotation menu is opened but no Annotation fields have been created in the project settings.",
-    "defaultMessage": "No annotation fields"
+    "defaultMessage": "No Workspace Annotations"
   },
   {
     "id": "tasks.goToSettings",

diff --git a/localization/react-intl/src/app/components/team/TeamMetadataRender.json b/localization/react-intl/src/app/components/team/TeamMetadataRender.json
@@ -27,6 +27,6 @@
   {
     "id": "teamMetadataRender.blankAnnotations",
     "description": "Text for empty annotations",
-    "defaultMessage": "No annotation fields"
+    "defaultMessage": "No Workspace Annotations"
   }
 ]
diff --git a/localization/react-intl/src/app/components/team/TeamTags/TeamTagsComponent.json b/localization/react-intl/src/app/components/team/TeamTags/TeamTagsComponent.json
@@ -29,6 +29,11 @@
     "description": "Pagination button to go to next page",
     "defaultMessage": "Next page"
   },
+  {
+    "id": "teamTagsComponent.blank",
+    "description": "Message displayed when there are no tags in the workspace",
+    "defaultMessage": "No Workspace Tags"
+  },
   {
     "id": "teamTagsComponent.tableHeaderName",
     "description": "Column header in tags table.",

diff --git a/localization/react-intl/src/app/components/user/UserPrivacy.json b/localization/react-intl/src/app/components/user/UserPrivacy.json
@@ -35,24 +35,19 @@
     "defaultMessage": "Please review our {ppLink} to learn how {appName} uses and stores your information."
   },
   {
-    "id": "userPrivacy.seeInformationText",
-    "description": "Description of what the app will do when the user requests their information",
-    "defaultMessage": "We will send you a file with the content and data you created and generated on {appName}. This can be kept for your records or transferred to another service."
+    "id": "userPrivacy.userRequests",
+    "description": "Title for area instructing how to request data from Check",
+    "defaultMessage": "User Information Requests"
   },
   {
-    "id": "userPrivacy.seeInformationButton",
-    "description": "Button text for the user to see their privacy information",
-    "defaultMessage": "See my information"
+    "id": "userPrivacy.seeInformationText",
+    "description": "Description of what the app will do when the user requests their information",
+    "defaultMessage": "Request a file with the content and data you created and generated on {appName} by contacting <a href=\"mailto:{privacyEmail}?subject=Send information\">{privacyEmail}</a>."
   },
   {
     "id": "userPrivacy.stopProcessingText",
     "description": "Help text to tell the user how they can request a change to their privacy settings",
-    "defaultMessage": "You can request {appName} to stop processing your information under certain conditions."
-  },
-  {
-    "id": "userPrivacy.stopProcessingButton",
-    "description": "Button text for the user to request a change to their privacy settings",
-    "defaultMessage": "Request to stop processing"
+    "defaultMessage": "Request {appName} to stop processing your information under certain conditions by contacting <a href=\"mailto:{privacyEmail}?subject=Stop processing\">{privacyEmail}</a>."
   },
   {
     "id": "userPrivacy.connectedAccounts",

diff --git a/src/app/components/article/ArticleForm.js b/src/app/components/article/ArticleForm.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { graphql, createFragmentContainer } from 'react-relay/compat';
 import PropTypes from 'prop-types';
-import { FormattedMessage, FormattedDate } from 'react-intl';
+import { FormattedMessage, FormattedHTMLMessage, FormattedDate } from 'react-intl';
 import Slideout from '../cds/slideout/Slideout';
 import ButtonMain from '../cds/buttons-checkboxes-chips/ButtonMain';
 import IconReport from '../../icons/fact_check.svg';
@@ -258,16 +258,12 @@ const ArticleForm = ({
           }
           <div className={styles['article-form-container']}>
             { claimDescriptionMissing && articleType === 'fact-check' ?
-              <div className={styles['article-form-no-claim-overlay']}>
-                <div className={styles['article-form-no-claim-container']}>
-                  <div className="typography-subtitle2">
-                    <FormattedMessage
-                      id="articleForm.noClaimDescript"
-                      defaultMessage="Start by adding Claim information for this Fact-Check"
-                      description="Message overlay to tell the user they must complete additional fields to unlock this area"
-                    />
-                  </div>
-                </div>
+              <div className={styles['article-form-no-claim-container']}>
+                <FormattedHTMLMessage
+                  id="articleForm.noClaimDescript"
+                  defaultMessage="Start by adding Claim information<br />for this Fact-Check"
+                  description="Message overlay to tell the user they must complete additional fields to unlock this area"
+                />
               </div>
               : null
             }

diff --git a/src/app/components/article/ArticleForm.module.css b/src/app/components/article/ArticleForm.module.css
@@ -4,28 +4,40 @@
   position: relative;
 }
 
-.article-form-no-claim-overlay {
-  background: rgba(255 255 255 / .8);
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: 0;
-  z-index: 10;
-}
-
 .article-rating-wrapper {
   display: flex;
   gap: 4px;
   padding-bottom: 5px;
 }
 
 .article-form-no-claim-container {
+  bottom: 0;
   color: var(--color-blue-32);
-  margin: 0 20px;
+  left: 0;
   position: absolute;
-  top: 30%;
+  right: 0;
+  text-align: center;
+  top: 0;
+
+  span {
+    @mixin typography-subtitle2;
+    display: block;
+    margin: 80px 0 0;
+    position: relative;
+    z-index: 11;
+  }
+
+  &::after {
+    background-color: rgba(255 255 255 / .85);
+    bottom: 0;
+    content: '';
+    left: 0;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    z-index: 10;
+  }
 }
 
 .article-form-info {

diff --git a/src/app/components/article/Articles.module.css b/src/app/components/article/Articles.module.css
@@ -1,10 +1,53 @@
 .articlesSidebar {
-  padding: 16px;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+
+  &::after {
+    background-color: var(--color-beige-86);
+    content: '';
+    display: block;
+    height: 2px;
+    left: 0;
+    position: absolute;
+    right: 16px;
+    top: 62px;
+    z-index: 1;
+  }
 
   .articlesSidebarTopBar {
+    background: var(--color-white-100);
     display: flex;
     gap: 16px;
+    height: 62px;
     justify-content: flex-end;
+    padding: 16px;
+  }
+
+  .articlesSidebarNoArticleWrapper {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 16px;
+    overflow-y: auto;
+    padding: 0 16px 16px;
+    width: 100%;
+
+    &::before {
+      background-color: var(--color-white-100);
+      content: '';
+      display: block;
+      flex-shrink: 0;
+      height: 2px;
+      left: 0;
+      margin: auto -16px 0;
+      position: relative;
+      right: 0;
+      z-index: 2;
+    }
   }
 
   .articlesSidebarNoArticle {
@@ -16,11 +59,6 @@
     text-align: center;
   }
 
-  .articlesSidebarListComponent {
-    max-height: 400px;
-    overflow: auto;
-  }
-
   .articlesSidebarList {
     display: flex;
     flex-direction: column;

diff --git a/src/app/components/article/ChooseExistingArticleButton.js b/src/app/components/article/ChooseExistingArticleButton.js
@@ -51,6 +51,8 @@ const ChooseExistingArticleButton = ({ teamSlug, onAdd }) => {
       { openSlideout && (
         <Slideout
           title={title}
+          showCancel
+          footer
           content={
             <div className={styles.contentWrapper}>
               <FormattedMessage

diff --git a/src/app/components/article/MediaArticles.js b/src/app/components/article/MediaArticles.js
@@ -133,7 +133,7 @@ const MediaArticlesComponent = ({
       { hasArticle ? (
         <MediaArticlesDisplay projectMedia={projectMedia} />
       ) : (
-        <>
+        <div className={cx('typography-body1', styles.articlesSidebarNoArticleWrapper)}>
           <div className={cx('typography-body1', styles.articlesSidebarNoArticle)}>
             <DescriptionIcon style={{ fontSize: 'var(--font-size-h4)' }} />
             <div>
@@ -151,10 +151,8 @@ const MediaArticlesComponent = ({
               description="Message displayed on articles sidebar when an item has no articles."
             />
           </div>
-          <div className={styles.articlesSidebarListComponent}>
-            <MediaArticlesTeamArticles teamSlug={team.slug} onAdd={handleConfirmAdd} />
-          </div>
-        </>
+          <MediaArticlesTeamArticles teamSlug={team.slug} onAdd={handleConfirmAdd} />
+        </div>
       )}
 
       {/* Confirm dialog for replacing fact-check */}

diff --git a/src/app/components/article/MediaArticlesDisplay.module.css b/src/app/components/article/MediaArticlesDisplay.module.css
@@ -1,8 +1,24 @@
 .mediaArticlesDisplay {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   gap: 16px;
-  margin-top: 16px;
+  overflow-y: auto;
+  padding: 0 16px 16px;
+  width: 100%;
+
+  &::before {
+    background-color: var(--color-white-100);
+    content: '';
+    display: block;
+    flex-shrink: 0;
+    height: 2px;
+    left: 0;
+    margin: auto -16px 0;
+    position: relative;
+    right: 0;
+    z-index: 2;
+  }
 }
 
 .explainerCard:hover {

diff --git a/src/app/components/article/RemoveArticleButton.js b/src/app/components/article/RemoveArticleButton.js
@@ -63,7 +63,6 @@ const RemoveArticleWrapperButton = ({ disabled, children }) => {
     return (
       <Tooltip
         key="remove-article-button"
-        placement="top"
         title={
           <FormattedMessage
             id="removedArticleButton.tooltip"
@@ -153,12 +152,27 @@ const RemoveArticleButton = ({
   return (
     <>
       <RemoveArticleWrapperButton disabled={disabled}>
-        <ButtonMain
-          size="small"
-          theme="text"
-          iconCenter={<IconClose />}
-          onClick={() => setOpenDialog(true)}
-        />
+        <Tooltip
+          disableHoverListener={disabled}
+          key="remove-article-button"
+          title={
+            <FormattedMessage
+              id="removeArticleButton.tooltip"
+              defaultMessage="Remove article from media cluster"
+              description="Tooltip message displayed on remove article button."
+            />
+          }
+          arrow
+        >
+          <span>
+            <ButtonMain
+              size="small"
+              theme="text"
+              iconCenter={<IconClose />}
+              onClick={() => setOpenDialog(true)}
+            />
+          </span>
+        </Tooltip>
       </RemoveArticleWrapperButton>
       <ConfirmProceedDialog
         open={openDialog}

diff --git a/src/app/components/cds/slideout/Slideout.js b/src/app/components/cds/slideout/Slideout.js
@@ -111,7 +111,7 @@ const Slideout = ({
 
 Slideout.defaultProps = {
   content: null,
-  footer: true,
+  footer: false,
   showCancel: false,
   cancelProps: {},
   mainActionButton: null,

diff --git a/src/app/components/cds/slideout/Slideout.test.js b/src/app/components/cds/slideout/Slideout.test.js
@@ -7,6 +7,7 @@ describe('<Slideout />', () => {
     const wrapper = mountWithIntl(<Slideout
       title="Slideout Title"
       content="Slideout content"
+      footer
       showCancel
       onClose={() => {}}
     />);