Feature/cv2-4440: articles rail drawer and navigation add claims fact checks published and imported

localization/react-intl/src/app/components/drawer/Projects/ArticlesComponent.json

@@ -0,0 +1,27 @@
+[
+  {
+    "id": "articlesComponent.ArticlesNavHeader",
+    "description": "The navigation name of the articles section",
+    "defaultMessage": "Articles"
+  },
+  {
+    "id": "articlesComponent.claim&factChecks",
+    "description": "Label for a list displayed on the left sidebar that includes items that have claim and fact-checks",
+    "defaultMessage": "Claim & Fact-Checks"
+  },
+  {
+    "id": "articlesComponent.explainers",
+    "description": "Label for a list displayed on the left sidebar that includes items that have explainers",
+    "defaultMessage": "Explainers"
+  },
+  {
+    "id": "articlesComponent.importedReports",
+    "description": "Label for a list displayed on the left sidebar that includes items from the 'Imported fact-checks' channel",
+    "defaultMessage": "Imported"
+  },
+  {
+    "id": "articlesComponent.published",
+    "description": "Label for a list displayed on the left sidebar that includes items that have published reports",
+    "defaultMessage": "Published"
+  }
+]

localization/react-intl/src/app/components/drawer/Projects/ProjectsComponent.json

@@ -19,11 +19,6 @@
     "description": "Label for a list displayed on the left sidebar that includes items from is any tip line channel and the item status is unstarted",
     "defaultMessage": "Inbox"
   },
-  {
-    "id": "projectsComponent.importedReports",
-    "description": "Label for a list displayed on the left sidebar that includes items from the 'Imported fact-checks' channel",
-    "defaultMessage": "Imported"
-  },
   {
     "id": "projectsComponent.suggestedMatches",
     "description": "Label for a list displayed on the left sidebar that includes items that have a number of suggestions is more than 1",
@@ -34,11 +29,6 @@
     "description": "Label for a list displayed on the left sidebar that includes items that were unmatched from other items (detached or rejected)",
     "defaultMessage": "Unmatched media"
   },
-  {
-    "id": "projectsComponent.published",
-    "description": "Label for a list displayed on the left sidebar that includes items that have published reports",
-    "defaultMessage": "Published"
-  },
   {
     "id": "projectsComponent.lists",
     "description": "List of items with some filters applied",

src/app/components/Root.js

@@ -108,10 +108,10 @@ class Root extends Component {
                   <Route path=":team/all-items(/:query)" component={AllItems} />
                   <Route path=":team/assigned-to-me(/:query)" component={AssignedToMe} />
                   <Route path=":team/tipline-inbox(/:query)" component={TiplineInbox} />
-                  <Route path=":team/imported-fact-checks(/:query)" component={ImportedReports} />
+                  <Route path=":team/articles/imported-fact-checks(/:query)" component={ImportedReports} />
                   <Route path=":team/suggested-matches(/:query)" component={SuggestedMatches} />
                   <Route path=":team/unmatched-media(/:query)" component={UnmatchedMedia} />
-                  <Route path=":team/published(/:query)" component={Published} />
+                  <Route path=":team/articles/published(/:query)" component={Published} />
                   <Route path=":team/feed/create" component={CreateFeed} />
                   <Route path=":team/feeds" component={FeedPage} />
                   <Route path=":team/feed/:feedId/edit" component={EditFeedTeam} />

src/app/components/drawer/Projects/ArticlesComponent.js

@@ -1,12 +1,145 @@
 import React from 'react';
+import { Link } from 'react-router';
+import { FormattedMessage } from 'react-intl';
+import cx from 'classnames/bind';
+import PublishedIcon from '../../../icons/fact_check.svg';
+import FileDownloadIcon from '../../../icons/file_download.svg';
+import BookIcon from '../../../icons/book.svg';
 import styles from './Projects.module.css';
+import { publishedDefaultQuery } from '../../team/Published';
+import ProjectsCoreListCounter from './ProjectsCoreListCounter';
+import NewArticleButton from './NewArticleButton';
+import { importedReportsDefaultQuery } from '../../team/ImportedReports';
 
-const ArticlesComponent = () => (
-  <React.Fragment>
-    <div className={styles.listTitle}>
-      Articles
-    </div>
-  </React.Fragment>
-);
+const ArticlesComponent = ({ team }) => {
+  // Get/set which list item should be highlighted
+  const pathParts = window.location.pathname.split('/');
+  const [activeItem, setActiveItem] = React.useState({ type: pathParts[2], id: parseInt(pathParts[3], 10) });
+
+  React.useEffect(() => {
+    const path = window.location.pathname.split('/');
+    if (activeItem.type !== path[2] || activeItem.id !== path[3]) {
+      setActiveItem({ type: path[3], id: parseInt(path[3], 10) });
+    }
+  }, [window.location.pathname]);
+
+  const handleSpecialLists = (listId) => {
+    setActiveItem({ type: listId, id: null });
+  };
+
+  const menuOptions = [
+    { label: 'Claim & Fact Check', icon: <PublishedIcon /> },
+    { label: 'Explainer', icon: <BookIcon /> },
+  ];
+
+  const handleMenuItemClick = () => {};
+
+  return (
+    <React.Fragment>
+      <div className={styles.listTitle}>
+        <FormattedMessage
+          id="articlesComponent.ArticlesNavHeader"
+          defaultMessage="Articles"
+          description="The navigation name of the articles section"
+        />
+      </div>
+      <div className={styles.listTitle}>
+        <NewArticleButton options={menuOptions} onMenuItemClick={handleMenuItemClick} />
+      </div>
+      <div className={styles.listWrapperScrollWrapper}>
+        <ul className={cx(styles.listWrapper)}>
+          <Link
+            onClick={() => { handleSpecialLists('fact-checks'); }}
+            to={`/${team.slug}/articles/fact-checks`}
+            className={styles.linkList}
+          >
+            <li
+              className={cx(
+                'projects-list__fact-checks',
+                styles.listItem,
+                styles.listItem_containsCount,
+                {
+                  [styles.listItem_active]: activeItem.type === 'fact-checks',
+                })
+              }
+            >
+              <PublishedIcon className={styles.listIcon} />
+              <div className={styles.listLabel}>
+                <FormattedMessage tagName="span" id="articlesComponent.claim&factChecks" defaultMessage="Claim & Fact-Checks" description="Label for a list displayed on the left sidebar that includes items that have claim and fact-checks" />
+              </div>
+              <ProjectsCoreListCounter query={publishedDefaultQuery} />
+            </li>
+          </Link>
+          <Link
+            onClick={() => { handleSpecialLists('explainers'); }}
+            to={`/${team.slug}/articles/explainers`}
+            className={styles.linkList}
+          >
+            <li
+              className={cx(
+                'projects-list__exaplainers',
+                styles.listItem,
+                styles.listItem_containsCount,
+                {
+                  [styles.listItem_active]: activeItem.type === 'explainers',
+                })
+              }
+            >
+              <BookIcon className={styles.listIcon} />
+              <div className={styles.listLabel}>
+                <FormattedMessage tagName="span" id="articlesComponent.explainers" defaultMessage="Explainers" description="Label for a list displayed on the left sidebar that includes items that have explainers" />
+              </div>
+              <ProjectsCoreListCounter query={publishedDefaultQuery} />
+            </li>
+          </Link>
+          <Link
+            onClick={() => { handleSpecialLists('imported-fact-checks'); }}
+            to={`/${team.slug}/articles/imported-fact-checks`}
+            className={styles.linkList}
+          >
+            <li
+              className={cx(
+                'projects-list__imported-fact-checks',
+                styles.listItem,
+                styles.listItem_containsCount,
+                {
+                  [styles.listItem_active]: activeItem.type === 'imported-fact-checks',
+                })
+              }
+            >
+              <FileDownloadIcon className={styles.listIcon} />
+              <div className={styles.listLabel}>
+                <FormattedMessage tagName="span" id="articlesComponent.importedReports" defaultMessage="Imported" description="Label for a list displayed on the left sidebar that includes items from the 'Imported fact-checks' channel" />
+              </div>
+              <ProjectsCoreListCounter query={importedReportsDefaultQuery} />
+            </li>
+          </Link>
+          <Link
+            onClick={() => { handleSpecialLists('published'); }}
+            to={`/${team.slug}/articles/published`}
+            className={styles.linkList}
+          >
+            <li
+              className={cx(
+                'projects-list__published',
+                styles.listItem,
+                styles.listItem_containsCount,
+                {
+                  [styles.listItem_active]: activeItem.type === 'published',
+                })
+              }
+            >
+              <PublishedIcon className={styles.listIcon} />
+              <div className={styles.listLabel}>
+                <FormattedMessage tagName="span" id="articlesComponent.published" defaultMessage="Published" description="Label for a list displayed on the left sidebar that includes items that have published reports" />
+              </div>
+              <ProjectsCoreListCounter query={publishedDefaultQuery} />
+            </li>
+          </Link>
+        </ul>
+      </div>
+    </React.Fragment>
+  );
+};
 
 export default ArticlesComponent;

src/app/components/drawer/Projects/NewArticleButton.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import ButtonMain from '../../cds/buttons-checkboxes-chips/ButtonMain';
+import AddIcon from '../../../icons/add.svg';
+import styles from './NewArticleButton.module.css';
+
+const NewArticleButton = ({ options, onMenuItemClick }) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  return (
+    <React.Fragment>
+      <ButtonMain
+        variant="contained"
+        size="default"
+        theme="text"
+        iconLeft={<AddIcon />}
+        onClick={e => setAnchorEl(e.currentTarget)}
+        label="New Article"
+        buttonProps={{
+          id: 'new-article-menu__open-button',
+        }}
+        customStyle={{
+          color: 'var(--color-gray-15)',
+          backgroundColor: 'var(--color-gray-88)',
+          borderColor: 'var(--color-gray-88)',
+          borderRadius: '8px',
+        }}
+      />
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        getContentAnchorEl={null}
+        onClose={() => setAnchorEl(null)}
+        className={styles.menuList}
+      >
+        {options.map(o => (
+          <MenuItem
+            key={o.label}
+            onClick={onMenuItemClick}
+            className={styles.menuItem}
+          >
+            <ListItemIcon className={styles.itemIcon}>
+              {o.icon}
+            </ListItemIcon>
+            <ListItemText>
+              {o.label}
+            </ListItemText>
+          </MenuItem>
+        ))}
+      </Menu>
+    </React.Fragment>
+  );
+};
+
+export default NewArticleButton;

src/app/components/drawer/Projects/NewArticleButton.module.css

@@ -0,0 +1,21 @@
+.menuList {
+  align-items: center;
+  display: flex;
+  margin-top: 10px;
+
+  .menuItem {
+    &:hover {
+      background-color: var(--color-blue-98);
+      color: var(--color-blue-32);
+    }
+  }
+
+  .itemIcon {
+    margin-right: 8px;
+    min-width: fit-content !important;
+  }
+
+  .menuItem:hover .itemIcon {
+    color: var(--color-blue-32);
+  }
+}

src/app/components/drawer/Projects/ProjectsComponent.js

@@ -13,21 +13,17 @@ import CategoryIcon from '../../../icons/category.svg';
 import ExpandLessIcon from '../../../icons/expand_less.svg';
 import ExpandMoreIcon from '../../../icons/expand_more.svg';
 import FeedIcon from '../../../icons/dynamic_feed.svg';
-import FileDownloadIcon from '../../../icons/file_download.svg';
 import InboxIcon from '../../../icons/inbox.svg';
 import LightbulbIcon from '../../../icons/lightbulb.svg';
 import PersonIcon from '../../../icons/person.svg';
-import PublishedIcon from '../../../icons/fact_check.svg';
 import UnmatchedIcon from '../../../icons/unmatched.svg';
 import Can from '../../Can';
 import DeleteIcon from '../../../icons/delete.svg';
 import ReportIcon from '../../../icons/report.svg';
 import { withSetFlashMessage } from '../../FlashMessage';
 import { assignedToMeDefaultQuery } from '../../team/AssignedToMe';
 import { suggestedMatchesDefaultQuery } from '../../team/SuggestedMatches';
-import { importedReportsDefaultQuery } from '../../team/ImportedReports';
 import { unmatchedMediaDefaultQuery } from '../../team/UnmatchedMedia';
-import { publishedDefaultQuery } from '../../team/Published';
 import { tiplineInboxDefaultQuery } from '../../team/TiplineInbox';
 import ProjectsCoreListCounter from './ProjectsCoreListCounter';
 import styles from './Projects.module.css';
@@ -164,29 +160,6 @@ const ProjectsComponent = ({
               </li>
             </Link>
           }
-          <Link
-            onClick={() => { handleSpecialLists('imported-fact-checks'); }}
-            to={`/${team.slug}/imported-fact-checks`}
-            className={styles.linkList}
-          >
-            <li
-              className={cx(
-                'projects-list__imported-fact-checks',
-                styles.listItem,
-                styles.listItem_containsCount,
-                {
-                  [styles.listItem_active]: activeItem.type === 'imported-fact-checks',
-                })
-              }
-            >
-              <FileDownloadIcon className={styles.listIcon} />
-              <div className={styles.listLabel}>
-                <FormattedMessage tagName="span" id="projectsComponent.importedReports" defaultMessage="Imported" description="Label for a list displayed on the left sidebar that includes items from the 'Imported fact-checks' channel" />
-              </div>
-              <ProjectsCoreListCounter query={importedReportsDefaultQuery} />
-            </li>
-          </Link>
-
           { team.alegre_bot && team.alegre_bot.alegre_settings.master_similarity_enabled &&
             <Link
               onClick={() => { handleSpecialLists('suggested-matches'); }}
@@ -236,28 +209,6 @@ const ProjectsComponent = ({
               </li>
             </Link>
           }
-          <Link
-            onClick={() => { handleSpecialLists('published'); }}
-            to={`/${team.slug}/published`}
-            className={styles.linkList}
-          >
-            <li
-              className={cx(
-                'projects-list__published',
-                styles.listItem,
-                styles.listItem_containsCount,
-                {
-                  [styles.listItem_active]: activeItem.type === 'published',
-                })
-              }
-            >
-              <PublishedIcon className={styles.listIcon} />
-              <div className={styles.listLabel}>
-                <FormattedMessage tagName="span" id="projectsComponent.published" defaultMessage="Published" description="Label for a list displayed on the left sidebar that includes items that have published reports" />
-              </div>
-              <ProjectsCoreListCounter query={publishedDefaultQuery} />
-            </li>
-          </Link>
 
           {/* Lists Header */}
           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}