Explainers: rail, drawer, and navigation (#1948)

Add new rail item for Articles

Add tooltip to new rail item

Add new navigation item “Explainers” for articles

Reference: CV2-4501

localization/react-intl/src/app/components/drawer/DrawerRail.json

@@ -33,5 +33,10 @@
     "id": "workspaceMenu.teamFeeds",
     "description": "Tooltip for drawer navigation to shared feeds",
     "defaultMessage": "Shared Feeds"
+  },
+  {
+    "id": "drawerRail.articlesDescription",
+    "description": "Tooltip for the Articles rail navigation",
+    "defaultMessage": "Articles"
   }
 ]

src/app/components/drawer/DrawerRail.js

@@ -12,6 +12,7 @@ import PersonIcon from '../../icons/person.svg';
 import SharedFeedIcon from '../../icons/dynamic_feed.svg';
 import ChevronRightIcon from '../../icons/chevron_right.svg';
 import ChevronLeftIcon from '../../icons/chevron_left.svg';
+import DescriptionIcon from '../../icons/description.svg';
 import styles from './DrawerRail.module.css';
 
 const messages = defineMessages({
@@ -50,17 +51,23 @@ const messages = defineMessages({
     defaultMessage: 'Shared Feeds',
     description: 'Tooltip for drawer navigation to shared feeds',
   },
+  articlesDescription: {
+    id: 'drawerRail.articlesDescription',
+    defaultMessage: 'Articles',
+    description: 'Tooltip for the Articles rail navigation',
+  },
 });
 
 const DrawerRail = (props) => {
   const testPath = window.location.pathname;
   const isSettingsPage = /[^/]+\/settings?/.test(testPath);
   const isMediaPage = /\/media\/[0-9]+/.test(testPath);
+  const isArticlePage = /[^/]+\/articles?/.test(testPath);
   const isFeedPage = /^\/[^/]+\/feed(s)?($|\/)/.test(testPath);
   const teamRegex = window.location.pathname.match(/^\/([^/]+)/);
   const teamSlug = teamRegex ? teamRegex[1] : null;
   const isUserSettingsPage = teamSlug === 'check';
-  const isTipline = !isUserSettingsPage && !isSettingsPage && !isFeedPage;
+  const isTipline = !isUserSettingsPage && !isSettingsPage && !isFeedPage && !isArticlePage;
   const pathParts = testPath.split('/');
   const [activeItem] = React.useState({ type: pathParts[2], id: parseInt(pathParts[3], 10) });
 
@@ -102,6 +109,8 @@ const DrawerRail = (props) => {
         onDrawerTypeChange('feed');
       } else if (isUserSettingsPage) {
         onDrawerTypeChange('user');
+      } else if (isArticlePage) {
+        onDrawerTypeChange('articles');
       } else {
         onDrawerTypeChange('tipline');
       }
@@ -139,6 +148,21 @@ const DrawerRail = (props) => {
             </Tooltip>
           </div>
           <div className={styles.drawerRailMiddle}>
+            <Tooltip arrow placement="right" title={props.intl.formatMessage(messages.articlesDescription)}>
+              <Link
+                className={cx(
+                  [styles.railIconLink],
+                  {
+                    [styles.railIconLinkActive]: isArticlePage,
+                  })
+                }
+                id="side-navigation__article-toggle"
+                onClick={() => setDrawerTypeChange('articles')}
+                to={`/${props.team.slug}/articles404`}
+              >
+                <DescriptionIcon />
+              </Link>
+            </Tooltip>
             <Tooltip arrow placement="right" title={props.intl.formatMessage(messages.tiplineDescription)}>
               <Link
                 className={cx(

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './Projects.module.css';
+
+const ArticlesComponent = () => (
+  <React.Fragment>
+    <div className={styles.listTitle}>
+      Articles
+    </div>
+  </React.Fragment>
+);
+
+export default ArticlesComponent;

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

@@ -4,6 +4,7 @@ import { QueryRenderer, graphql } from 'react-relay/compat';
 import Relay from 'react-relay/classic';
 import ProjectsComponent from './ProjectsComponent';
 import FeedsComponent from './FeedsComponent';
+import ArticlesComponent from './ArticlesComponent';
 import SettingsComponent from './SettingsComponent';
 import UserSettingsComponent from './UserSettingsComponent';
 
@@ -42,6 +43,14 @@ const renderQuery = ({ error, props, drawerType }) => {
           params={props.params}
         />
       );
+    } else if (drawerType === 'articles') {
+      return (
+        <ArticlesComponent
+          me={props.me}
+          team={props.team}
+          params={props.params}
+        />
+      );
     }
   }